How to trigger a function when all ajax calls in a function are completed?

Question

I have a problem of finding when all the ajax completed.Here is my function.

function getValuesForTablePropertySelected(questionList, itemsArray) {
    for (var i = 0; i < itemsArray.length; i++) {
        switch (itemsArray[i]) {
        case "Tags":
                loadTag(questionList);
                break;
        case "Date Created":
                displayTablePropertySelected(itemsArray);
                break;
        case "Date Last Used":
                loadDLU(questionList);
                break;
        case "Number of Launched Surveys Used In":
                loadNLSU(questionList);
                break;
        case "Number of Reponses":
                loadNR(questionList);
                break;
        case "Type 1 Associations":
                loadT1A(questionList);
                break;
        case "Type 3 Associations":
                loadT3A(questionList);
                break;
        case "Sites Linked To":
                loadSLT(questionList);
                break;
        case "Last Modified By":
                displayTablePropertySelected(itemsArray)
                break;
        default:
                break;
        }
    }
    showResult();
}

Each function in the "CASE" contains an ajax call. I need to use asynchronous calls only.

I want to trigger "showResult()" function after AJAX complete in all the functions . Different AJAX is taking different time to complete.

Please help me find a solution for this situation.

possible duplicate of [How to know when all ajax calls are complete](http://stackoverflow.com/questions/287188/how-to-know-when-all-ajax-calls-are-complete) — empiric, Jun 18 '15 at 09:43
Have a look at [Wait until all jQuery Ajax requests are done?](http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) — jules, Jun 18 '15 at 09:45
@empiric Its not working.. I have tried that. I will fire when "ajax request" is completed. I want to fire when Ajax is completed — Rino Raj, Jun 18 '15 at 09:49
@jules Its not working.. I have tried that. I will fire when "ajax request" is completed. I want to fire when Ajax is completed — Rino Raj, Jun 18 '15 at 09:50
@empiric actually I am loading some data in a variable,on AJAX "success". What I meant by AJAX complete is after loading value to that variable on AJAX success — Rino Raj, Jun 18 '15 at 09:56

kosmos · Accepted Answer · 2015-06-18T10:25:27.087

3

You can do it easily with jQuery .ajaxComplete():

// create a counter (global)
var ajax_calls_counter = 0;

// in your current code, in each ajax call success, add 1 to the counter

// manage ajax succeeded events
$(document).ajaxComplete(function(){
    if( ajax_calls_counter == itemsArray.length ){
        showResult();
    }
});

An example (jsFiddle):

$(function(){

    $(this).ajaxComplete(function(){
        var $body = $('body');
        $body.append('ajax number '+ counter +' call complete!<br />');
        if( counter == array.length ) $body.append('<strong>all</strong> ajax calls completed');
    });

    var array = [1, 2, 3, 4, 5];
    var counter = 0;

    for( var i = 0; i < array.length; i++ ){
        $.ajax({
            url: location.href,
            success: function(){
                counter++;
            }
        });
    }
});

edited Jun 18 '15 at 10:25

answered Jun 18 '15 at 09:46

kosmos

4,253
1
18
36

I have many other AJAX calls working in the document. As per the solution you have told it will check for all the document. I have to check only the AJAX calls which are called in that particular function – Rino Raj Jun 18 '15 at 09:52
Then, using my code, OP has to call `showResult()` if `ajax_calls_counter` reaches the number of calls. I updated the answer adding the line. – kosmos Jun 18 '15 at 09:53
@RinoRaj Yes, it is just an event handler so all calls pass through it. – kosmos Jun 18 '15 at 10:01
It will not work in this scenario. If I add this code it will wait for all the AJAX in the document to be completed. I have to check only the AJAX calls which are called in that particular function – Rino Raj Jun 18 '15 at 10:01
That's wrong. This event is called *for each* completed ajax call. So, once the counter reaches the `itemsArray` length (supposing there is one ajax call per array item), it will fire `showResult()` function. – kosmos Jun 18 '15 at 10:15
Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time. I have many other AJAX calls running in the same page at the same time. So I cannot use .ajaxComplete – Rino Raj Jun 18 '15 at 10:18
I made an example, please, check [this jsFiddle](http://jsfiddle.net/kmsdev/uutmrrzw/). You have to manage the way for retrieve the data in the `.ajaxComplete()` event to match your requirements. I hope you can find a solution. – kosmos Jun 18 '15 at 10:23
Please refer this. I have many other AJAX call in this page itself. At that time it will fail.It will not work in this condition. http://jsfiddle.net/Rino_Raj/uutmrrzw/1/ – Rino Raj Jun 18 '15 at 10:35
I am sorry but I can't understand it. Do not use `counter++` in your ajax successes which don't need it ([jsFiddle](http://jsfiddle.net/kmsdev/uutmrrzw/2/)). I think using a good nomenclature you can achieve it. Anyway, hope you can find the best workaround for your requirements. At my understanding, with your code, I think it's perfectly possible. I can be wrong too. – kosmos Jun 18 '15 at 10:40
Thank you.. I think its the possible way to make it work – Rino Raj Jun 18 '15 at 10:42

score 0 · Answer 2 · answered Jun 18 '15 at 09:44

For a single AJAX call . You can write the code in the success block . But if you want to check status for multiple AJAX calls better you use some variable which you set after every success/failure you receive from the AJAX call.

And if you receive the expected variable value then perform the desired action

How to trigger a function when all ajax calls in a function are completed?

2 Answers2

Linked