Jquery ajaxStart doesnt get triggered

Question

This code

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

in my mark-up

&l         


        

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