jQuery callback for multiple ajax calls

jquery ajax callback
MisterIsaak picture MisterIsaak · Dec 6, 2010 · Viewed 166.4k times · Source

I want to make three ajax calls in a click event. Each ajax call does a distinct operation and returns back data that is needed for a final callback. The calls themselves are not dependent on one another, they can all go at the same time, however I would like to have a final callback when all three are complete.

$('#button').click(function() {
    fun1();
    fun2();
    fun3();
//now do something else when the requests have done their 'success' callbacks.
});

var fun1= (function() {
    $.ajax({/*code*/});
});
var fun2 = (function() {
    $.ajax({/*code*/});
});
var fun3 = (function() {
    $.ajax({/*code*/});
});

Answer

Greg picture Greg · Nov 20, 2011

Looks like you've got some answers to this, however I think there is something worth mentioning here that will greatly simplify your code. jQuery introduced the $.when in v1.5. It looks like:

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

Didn't see it mentioned here, hope it helps.

Related questions

Pass variable to function in jquery AJAX success callback

I am trying to preload some images with a jQuery AJAX call, but am having real problems passing a (url) string into a function within the success function of the AJAX call (if that makes sense). Here is my code …

Read More
jQuery: Handle fallback for failed AJAX Request

Can jQuery provide a fallback for failed AJAX calls? This is my try: function update() { var requestOK = false; $.getJSON(url, function(){ alert('request successful'); requestOK = true; }); if (!requestOK) { alert('request failed'); } } Unfortunately, even if the callback function of the $.getJSON() …

Read More
jQuery / Ajax - $.ajax() Passing Parameters to Callback - Good Pattern to Use?

JavaScript code I'm starting with: function doSomething(url) { $.ajax({ type: "GET", url: url, dataType: "xml", success: rssToTarget }); } Pattern I would like to use: //where elem is the target that should receive new items via DOM (appendChild) function doSomething(url, elem) { $.…

Read More