how do i wait for multiple ajax calls to complete from a .each loop

Question

I am running a loop that updates records on a table but i need to wait for all of the records to update before i continue on.

How can I have jquery wait until all of the calls in the loopselectedrows function completes? I have read about .deferred and .when but i am not sure how to implement either. they both do not seem to able to handle an array of calls if i where to change over to using an array for the ajax posts. Any help would be greatly appreciated.

this is the button that starts it all :

                click:  function () {

                        // validate all rows
                        var $selectedRows = $('#Table1').jtable('selectedRows');                                             
                        LoopSelectedRows($selectedRows, 'Validate');

/// wait here until all ajax calls have completed // then continue with checking

                        // check for any row with an error 
                        var $ValidatedRows = $('#Table1').jtable('selectedRows');
                        var boolCheck = checkValidatedRows($ValidatedRows);                            


                        // if all records are succesfull then add them
                    // else alert user
                        if (boolCheck == true) {
                            LoopSelectedRows($selectedRows, 'Add');
                        }
                        else {
                            alert("Please correct invalid records and try again");
                        }

                }

the first thing this does is take all of the records from the table and passes them to a looping function.

this is the looping function -

function LoopSelectedRows(SelectedRecords, actionType) {

    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            record.PERSON_NAME = record.PERSON_ID;

            // Actions for loop 

            // Validation Action
            if (actionType == 'Validate') {
                 check = validateRecord(record);
            }

            // call add function   
            if (actionType == 'Add') {
                AddRecordToTable(record);
            }
        })
    };

}

this loop can either validate or add records for now i am only worried about the validation function

this is the validation function:

function validateRecord(dataRecord) {                

    $.ajax({
        url: "./ValidateAddRecord",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(dataRecord),
        success: function (data) {
            if (data.Result == "OK") {

                // update record with message 
                $('#table1').jtable('updateRecord', { record: data.Record });

            }
            else {
                // display error
                alert(data.Message);
            }
        }
    });        
}

http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done/9350515#9350515 — gloomy.penguin, Aug 20 '14 at 15:28
checkout jquery when/then and promise: http://api.jquery.com/category/deferred-object/ — Laurens Kling, Aug 20 '14 at 15:29

jfriend00 · Answer 1 · 2014-08-20T22:03:04.870

One fairly clean way to know when multiple ajax calls are done is to use promises and jQuery's $.when(). That will give you a callback when all the ajax calls are done. It will take a little bit of reorganization of your code to use that.

First, you return the $.ajax() promise from validateRecord():

function validateRecord(dataRecord) {                

    return $.ajax({
        url: "./ValidateAddRecord",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(dataRecord),
        success: function (data) {
            if (data.Result == "OK") {

                // update record with message 
                $('#table1').jtable('updateRecord', { record: data.Record });

            }
            else {
                // display error
                alert(data.Message);
            }
        }
    });        
}

Then, you collect all the promises in LoopSelectedRows() and return a master promise using `$.when():

function LoopSelectedRows(SelectedRecords, actionType) {
    var promises = [];

    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            record.PERSON_NAME = record.PERSON_ID;

            // Actions for loop 

            // Validation Action
            if (actionType == 'Validate') {
                 promises.push(validateRecord(record));
            }

            // call add function   
            if (actionType == 'Add') {
                promises.push(AddRecordToTable(record));
            }
        })
    };
    // return master promise
    return $.when.apply($, promises);
}

Then, you can use that final promise to know when everything is done.

click:  function () {
    // validate all rows
    var $selectedRows = $('#Table1').jtable('selectedRows');                                             
    LoopSelectedRows($selectedRows, 'Validate').then(function() {
         // all the ajax calls in LoopSelectRows are done now

         // check for any row with an error 
         var $ValidatedRows = $('#Table1').jtable('selectedRows');
         var boolCheck = checkValidatedRows($ValidatedRows);                            

         // if all records are succesfull then add them
         // else alert user
         if (boolCheck == true) {
             LoopSelectedRows($selectedRows, 'Add');
         } else {
             alert("Please correct invalid records and try again");
         }
    });

FYI, you probably also want to change AddRecordToTable() to return a promise so it can work the same way (though it is not required because you aren't trying to wait for that operation to be done).

@DanW - Since you may not have realized it, on this site, when one particular answer solves your issue, then you can indicate that to the community by checking the green checkmark to the left of that answer. That will earn both you and the person who supplied the answer some reputation points which can earn you more privileges here over time. — jfriend00, Sep 09 '15 at 22:09

score 1 · Answer 2 · answered Aug 20 '14 at 15:57

1

$.active returns the number of active Ajax requests. Use $.active==0 means no ajax requests are active. You could also use ajaxStart and ajaxStop to keep track of when requests are active.

answered Aug 20 '14 at 15:57

Jagadeesh

570
3
11

score 0 · Answer 3 · answered Aug 21 '14 at 20:16

Thank you jfriend00, your solution seems to have solved my issues.

Below is the updated version i am now using for anyone interested :

click:  function () {

                    // validate all rows

                    var $selectedRows = $('#table1).jtable('selectedRows');

                        LoopSelectedRows($selectedRows, 'Validate').then(function () {


                            // check for any row with an error 
                            var $ValidatedRows = $('#table1).jtable('selectedRows');
                            var boolCheck = checkValidatedRows($ValidatedRows);

                            // if all records are succesfull then add them
                            // else alert user
                            if (boolCheck == true) {
                                LoopSelectedRows($selectedRows, 'Add');
                            }
                            else {
                                alert("Please correct invalid records and try again");
                            }
                        });
                }




// loop function
function LoopSelectedRows(SelectedRecords, actionType) {
    var promises = [];
    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            // Actions for loop 

            // Validation Action

            if (actionType == 'Validate') {
                 promises.push(validaterecord(record));
            }


            // call add function   
            if (actionType == 'Add') {
                AddRecordToTable(record);
            }
        })
    };        
    return $.when.apply($, promises);
}


  // validate function
function validaterecord(dataRecord) {
    var def = $.Deferred();
    $.ajax({
        url: "./ValidateAddRecord",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(dataRecord),
        success: function (data) {
            if (data.Result == "OK") {

                // update record with message 
                $('#table1).jtable('updateRecord', { record: data.Record });

                // resolve token
                def.resolve();

            }
            else {
                // display error
                alert(data.Message);
            }
        }
    });

    return def.promise();
}

how do i wait for multiple ajax calls to complete from a .each loop

3 Answers3