Series of Ajax request doesn't wait for finish

Question

I have series of ajax calls, I want that when the calls get completed the page reloads , I am doing this

function verifyFrnds() {
    var boxes = $(".matchFrnds:checked").length;
    //alert(boxes);
    var call = 1;
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            call++;
            var sendData = $(this).val();
            $.post('AJAX PAGE', {
                sendData: sendData
            }, function (data) {
                //window.location.reload();
            });
            //alert(call);
            //alert(call + ' ' + boxes + ' ' + (call >= boxes));
            if (call >= boxes) {
                // window.location.reload();
                alert("I am executed");
            }
        }
    });
}

so If I do alert, then all the ajax calls are exexuted and I am shown an alert message, but If I do window.localtion.reload() then after few ajax calls the page get reloaded, which should be reloaded after ALL calls. My main purpose is to reload the page when all calls are done.Any idea what I am doing wrong. There is already a question on SO but it didn't help me much.

Answer 1

You should increment call not after the if, but in the success of your ajax calls.

I advice you to put the reload call in a function you call with setInterval and not in the success ajax returns.

Answer 2

Try using $.when:

function verifyFrnds() {
    var deferreds = []; //using an array to save promise interfaces
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            var sendData = this.value;
            //we push each request in array (returned promise interface)
            deferreds.push($.post('AJAX PAGE', {
                sendData: sendData
            }));
        }
    });
    //as $.when only accept deferred(promise) as arguments, we need to apply $.when to each promise of array
    $.when.apply(null, deferreds).done(function () {
        alert("I am executed once all requests done (success)");
        window.location.reload();
    });
}

Answer 3

You could chain your ajax call using $.then if you need to do it sequentially. Like this:

function verifyFrnds() {
    var d = jQuery.Deferred();
    var p=d.promise();

    $(".matchFrnds:checked").each(function (index) {//instead of .matchFrnds
        if ($(this).is(':checked')) {

            var sendData = $(this).val();
            p.then($.post('AJAX PAGE', {
                sendData: sendData
              }, function (data) {
                //window.location.reload();
              })
            );
        }
    });

    p.then(function(){
         alert("I am executed");
    });
    d.resolve();
}

Note that for jQuery prior to 1.8, you have to use .pipe instead of .then. Also check your code, I think there is a mistake, it should be $(".matchFrnds:checked").each( instead of $(".matchFrnds").each(

Answer 4

Just like A. Wolff said, use jQuery.when and jQuery.then.

Another alternative is: call a method on ajax finish ( jqXHR method always ) . Check if call >= boxes ( or whatever condition you like ) in that method. For me, this is a bit easy to understand as compared to another solution.

function verifyFrnds() {
    var boxes = $(".matchFrnds:checked").length;
    //alert(boxes);
    var call = 1;
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            //call++; Move it to .always Thanks for pointing out Khanh
            var sendData = $(this).val();
            $.post('AJAX PAGE', {
                sendData: sendData
            }, function (data) {
                //window.location.reload();
            }).always ( function() {  
                // This method will be called on ajax completion. be it a failure or success.
                // see .done ( for success only )  ; .fail ( for failure only )
                call++;
                if (call >= boxes) {
                  // window.location.reload();
                   alert("I am executed");
                }
            }   ;


        }
    });
}

For more on jqXHR object. Read: http://api.jquery.com/jQuery.ajax/#jqXHR