Question

This code

$("#loading").ajaxStart(function() {
        alert("start");
        $(this).show();
    });

in my mark-up

<div style="text-align:center;"><img id="loading" src="../images/common/loading.gif" alt="" /></div>

Here is the full ajax request:

$.ajax({
        type: "POST",       

        url: "http://localhost/WebServices/Service.asmx/GetResults",

        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {

            var results = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            PopulateTree(results);
        },

        error: function(xhr, status, error) {
            var msg = JSON.parse(xhr.responseText);
            alert(msg.Message);


        }
    });

$("#loading").ajaxStart(function() {
        alert("start");
        $(this).show();
    });

    $("#loading").ajaxStop(function() {
        alert("stop");
        $(this).hide();
        $("#st-tree-container").show();

    });

never fires alert “start” even though the gif is shown to rotate. AjaxStop gets triggered as expected.
Any ideas why?

Answer 1

It’s not getting triggered because your handler for .ajaxStart() isn’t registered until after the ajax request is already going (past when it would have been called). The .ajaxStop() is registered after as well, but before the request finishes, so when it comes back it is hooked up to run.

To fix this, move this before your first $.ajax() call:

$("#loading").ajaxStart(function() {
  $(this).show();
}).ajaxStop(function() {
  $(this).hide();
  $("#st-tree-container").show();
});

UPDATE: Starting jQuery 1.9, AJAX events should be attached to document only.
http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

$(document).ajaxStart(function() {
  $("#loading").show();
});

$(document).ajaxStop(function() {
  $("#loading").hide();
  $("#st-tree-container").show();
});