Jquery ajaxStart doesnt get triggered

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

I'm not sure if this will fix your issue, but generally I use debug.info('your message') in combination with the Firebug console instead of alert(), as alert interrupts your script processing until you dismiss it whereas debug.info is fairly unobtrusive.

You can download the implementation of debug.info here.

Answer 2

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();
});