JQuery .ajax enters Success before calling page finishes

Question

I've got the following code:

<script type="text/javascript">

        $(function(){
        $("#AddMaps").submit(function(){

            var $form = $('#AddMaps');

            $.ajax({
                type: 'POST',
                url: $form.attr( 'action' ),
                data: $form.serialize(),
                dataType: "json",
                beforeSend:function(){
                    // Set up Loading Image and disable submit button
                    $('#ajax-panel').html('<div class="loading"><img src="loader.gif" alt="Loading..." /></div>');
                },
                success:function(data){
                    // Successful Request; do something
                    $('#ajax-panel').empty();
                    if (data.response != "Success"){
                        $('#ajax-panel').append('Error Occurred' + data.response);
                    }
                    else {
                        $('#ajax-panel').append('File(s) Uploaded');
                    }
                },
                error:function(){
                    // Failed Request; Freak out
                    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        });
        });



        </script>

        <form id="AddMaps" action="test_multiple.php">
            <fieldset>
            <label for="server">Select a Server:</label>
            <select name="server" id="server">
        <option value="1">Server 1</option>
        <option value="2">Server 2</option>
        <option value="3">Server 3</option>
            </select>
            </fieldset>
            <input name="submit" type="submit" id="submit" value="Upload">
            <div id="ajax-panel"></div>
        </form>

The problem I am having, is that the ajax call is entering the success function long before the call to test_multiple.php completes. test_multiple is doing a lot of back end work and if I call it directly the page takes approximately 15 seconds to load. Using this, it is reporting that it completes instantly, even though I can see the work in the backend isn't done yet.

Why does it enter success right away? How do I stop it from doing so?

Additionally, Firebug is reporting an aborted POST request to test_multiple but a successful GET request to test_multiple.

Answer 1

That is probably happening because your form is submitting the normal way. You need to return false at the end of your submit handler to prevent the form from redirecting to the specified 'action', thus allowing the XHR request to finish.

Additionally, Firebug is reporting an aborted POST request to test_multiple but a successful GET request to test_multiple.

The form tag in your markup has no 'method' attribute set, so it defaults to GET. This is evidence that your form is being submitted the normal way. The aborted POST is probably because the XHR request did not get a chance to finish before the server received the normal HTTP GET request and starting sending output.