Why is ajaxStop() not firing in Internet Explorer?

Question

this is my first time using ajax. and i don't have an idea where the ajaxStop takes place. I am using the ajaxStart to show a loading image and need the ajaxStop to hide the loading image. Please help.

I have this code to call a popup from "PageOne"

function ShowFixSteps(path, title){
  var winHeight = parseInt(jQuery(window).height() - 100);
  var winWidth = parseInt(jQuery(window).width() - 600);

  jQuery.ajax({
    url: path,
    success: function(data) {
      jQuery("#divPopup").load(path).dialog({
        modal: true,
        width: winWidth,
        height: winHeight,
        title: title,
        position: "center"
      });
    }
  });

  jQuery("#divPopup").bind("dialogbeforeclose", function(){
    jQuery("#divPopup").empty('');
  });
}

And on my Master page, I have this code to check the start and stop of ajax call:

$(document).ajaxStart(function() {
  alert('start');
});

$(document).ajaxStop(function() {
  alert('stop');
});

$(document).ajaxError(function() {
  alert('error');
});

It alerts the START but not the STOP: no ERROR also.

NOTE: START and STOP alerts are working on Chrome but not IE.

Answer 1

ajaxStop is triggered after all current AJAX requests have completed.

You can read more about ajaxStop using the jQuery API documentation.

Answer 2

You can use .ajaxStop() in the following manner:

$(document).ajaxStop(function() {
    $('#loading-spinner').hide();
});

Or you could add :complete callback to your AJAX function, like so:

jQuery.ajax({
    url: path,
    success: function(data) {
      jQuery("#divPopup").load(path).dialog({
        modal: true,
        width: winWidth,
        height: winHeight,
        title: title,
        position: "center"
      });
    },
    complete: function() {
        // do something here when ajax stops
        // like hiding the spinner or calling another function
    }
  });

And as you mentioned how to stop an AJAX request in one of your comments, here's how:

var ajax1 = $.ajax({
    type: "POST",
    url: "some.php",
    ...
});

ajax1.abort()

You could check if a specific AJAX request is running before aborting by doing this:

if (ajax1) {
    ajax1.abort();
}

Or you could check to see if any ajax requests are running before aborting by doing something like this:

var ajax_inprocess = false;
$(document).ajaxStart(function() {
    ajax_inprocess = true;
});
$(document).ajaxStop(function() {
    ajax_inprocess = false;
});

if (ajax_inprocess == true) {
    request.abort();
}

Beware using .abort() though, as it only stops the client-side code from listening for a response, it wont actually stop the server from working. There are actually a few major caveats using this, so make sure you read about it first.

UPDATED ANSWER FOR UPDATED QUESTION

For IE problem, try using:

$(document).ajaxComplete(function() {
    // do something
})

Instead of ajaxStop() . ajaxComplete() will fire each time an AJAX request finishes, rather than when ALL requests have finished using ajaxStop() . Maybe it will help, maybe not.