CODEWITHSUNDEEP
javascriptjqueryajax
CL So
CL So

Reputation: 3759

How to trigger a function when all ajax finish?

ajax request will be initiated by user click

It is impossible to know how many request will be sent

I tried ajaxComplete, but it is not work, I think it cannot detects ajax after the page loaded.

function ajax1() {
    $.ajax({
        url: 'getCount.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            var count = parseInt(data);
            for (var i = 0; i < count; i++) {
                ajax2();
            }
        }
    });
}

function ajax2() {
    $.ajax({
        url: 'getCount2.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            var count = parseInt(data);
            for (var i = 0; i < count; i++) {
                ajax3();
            }
        }
    });
}

function ajax3() {
    $.ajax({
        url: 'ajax3.php',
        type: 'GET',
        dataType: 'html',
        success: function (data) {
            //do something
        }
    });
}
$(document).ajaxComplete(function (event, xhr, settings) {
    alert('Complete');
});

Upvotes: 0

Views: 1121

Answers (2)

vittore
vittore

Reputation: 17579

UPDATE: Really good read on promises: Promises cookbook

Normal way of doing that is using promises returned by $.ajax function.

Change your functions to return result of .ajax call:

function ajax1(..) { 
  return $.ajax(...)
}

Then use $.when to make new promise resolved when all promises are resolved.

$.when([ajax1(), ajax2(), ajax3()]).then(function() { alert('all complete') })

However in more complicated case (as is yours) you need to dynamically store references to all promises and only call $.when once all the promises added.

So for instance you can create to arrays of promises, one for ajax2 calls and one for ajax3 calls.

var ajax2calls = [], ajax3calls=[]  

function ajax1() {
  return $.ajax({
    url: 'getCount.php',
    type: 'GET',
    dataType: 'html',
    success: function (data) {
        var count = parseInt(data);
        for (var i = 0; i < count; i++) {
            ajax2calls.push(ajax2());
        }

        $.when(ajax2calls).then(function() {
            $.when(ajax3calls).then(function() {
               alert('all done')
            }
        })

    }
  });
}

Also, you might want to consider using Bluebird promise library, as it provides a lot more rich API than regular promise/A or promise/A+. Check map, settle, all methods etc.

Upvotes: 3

Mav2287
Mav2287

Reputation: 876

The way that I see that would make the most sense is to do nested call backs. This way everything is happening within callbacks and nothing happens until they all finish. This questions may help wait for a jquery ajax callback from calling function

Upvotes: 0

Related Questions