Using ajaxStop callback to set doument.location

Question

I have a number of jquery asynchronous calls being called in a loop. At the end of the last call, I want the page to refresh to show the results after the call. What I have isn't working. I would appreciate some help on either why its not working or a better solution!

Thanks.

var ajaxCount = 0;

$(document).ready(function () {


    $(document).ajaxStart(function () {
        ajaxCount = 1;
    });
    $(document).ajaxStop(function () {
        ajaxCount = 0;
    });
}

function(){
    for(x loops){
        $ajax({...});
    }
    while (ajaxCount != 0) { }
    document.location = applicationRoot + 'Qc.mvc/ViewQc/' + batchId + '/1';

}

Answer 1

.ajaxStop() fires when all concurrent ajax requests have finished, so you can just use it directly, for example:

function(){
  $(document).ajaxStop(function() {
    window.location.href = applicationRoot + 'Qc.mvc/ViewQc/' + batchId + '/1';
  });
  $ajax({...});
}

If you need the count of active AJAX requests, jQuery already maintains this, it just doesn't publicize it...it's actually what's used to determine when to fire ajaxStart and ajaxStop events. You can accedd it via $.active. In jQuery 1.5+ it's being moved to $.ajax.active.

Answer 2

Why not put window.location.href = .... in the callback function of that one particular ajax call?

$(document).ajaxStart(function () {
    ajaxCount = ajaxCount + 1;
});
$(document).ajaxStop(function () {
    ajaxCount = ajaxCount - 1;
    if (ajaxCount == 0 && check if they're all fired)
            window.location.href = ...
});