Jquery ajaxStart doesnt get triggered

Question

This code

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

in my mark-up

&l         


        

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

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

Answer 3

Starting jQuery 1.9, AJAX events should be attached to document only.

Refer migration guide. http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

As of jQuery 1.9, the global AJAX events (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) are only triggered on the document element. Change the program to listen for the AJAX events on the document. For example, if the code currently looks like this:

$("#status").ajaxStart(function() { 
   $(this).text("Ajax started"); 
});

Change it to this:

$(document).ajaxStart(function() {
   $("#status").text("Ajax started");
});