JQuery Callback after multiple functions

Question

I have seperated HTML files in my project which I load into a main page.

$("#tabs-1").load("tab1.html");
$("#tabs-2").load("tab2.html");
$("#tabs-3").load("tab3.html");

This function is asynchronous so I need a callback statement after these three fragments have been loaded. I only know how to use a callback for 1 function, not all 3. Here is the workaround I had in mind, but I'm sure there must be a better way.

$("#tabs-1").load("tab1.html", function(){
   $("#tabs-2").load("tab2.html", function(){
       $("#tabs-3").load("tab3.html", function(){
           doCallback();
       });
   });
});

Fact is I have more than 3 fragments so I'm looking for a cleaner way — Anonymoose
– Anonymoose, Commented Jul 12, 2013 at 6:56
Also in this example the fragments aren't loaded together but 1 by 1. — Anonymoose
– Anonymoose, Commented Jul 12, 2013 at 7:03
so you want them to all be loading at once and when they are finished, but only all of them, to then do the callback? — Jamie Hutber
– Jamie Hutber, Commented Jul 12, 2013 at 7:04

jensgram · Accepted Answer · 2013-07-12 07:16:45Z

4

.load() does not return a jqXHR object and so cannot be directly used with $.when. What you can easily do, however, is to replace .load() with an equivalent .get() and then use the Deferred / Promise strategy:

var req1 = $.get("tab1.html", function(data) {
    $("#tabs-1").html(data);
});
var req2 = $.get("tab2.html", function(data) {
    $("#tabs-2").html(data);
});
var req3 = $.get("tab3.html", function(data) {
    $("#tabs-3").html(data);
});
$.when(req1, req2, req3).then(doCallback);

Or, you can maintain the Deferreds yourself (untested!):

var d1 = $.Deferred(),
    d2 = $.Deferred(),
    d3 = $.Deferred();
$("#tabs-1").load("tab1.html", function() { d1.resolve(); });
$("#tabs-2").load("tab2.html", function() { d2.resolve(); });
$("#tabs-3").load("tab3.html", function() { d3.resolve(); });
$.when(d1, d2, d3).then(doCallback);

answered Jul 12, 2013 at 7:16

jensgram

31.6k6 gold badges83 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-07-12 07:14:00Z

2

You can use $.when()

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

The load() function cannot be used in this case because it doesn't return the promise object

function load(el, path){
    return $.get(path, function(html){
        $(el).html(html)
    })
}

var l1 = load("#tabs-1", "tab1.html");
var l2 = load("#tabs-2", "tab2.html");
var l3 = load("#tabs-3", "tab3.html");
$.when(l1, l2, l3).then(function(){
    doCallback();
})

edited Jul 12, 2013 at 7:14

answered Jul 12, 2013 at 7:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

jensgram Over a year ago

.load() does not return a jqXHR object. Will this work none the less or should .load() be replaced by .get()?

Yevgeniy Afanasyev · Accepted Answer · 2014-10-02 06:31:30Z

0

My suggestion - to make it clear:

1) create jquery prototype function for the easy-read interface

    jQuery.fn.extend({
        my_load: function(what) {
            var my_this = this;
            return $.get(what, function(data) {
                my_this.html(data);
            });
        }
    });

2) use it like this

        $.when(
            $("#page_1").my_load("page_1.php"),
            $("#page_2").my_load("page_2.php")
        ).then(function() {
            console.log("all loaded");
            // extra code here
        });

I've tested it in Chrome and in IE-11 with jquery-2.0.2

answered Oct 2, 2014 at 6:31

Yevgeniy Afanasyev

42k30 gold badges186 silver badges211 bronze badges

Collectives™ on Stack Overflow

JQuery Callback after multiple functions

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related