CODEWITHSUNDEEP
javascriptjquery
Tilak Raj
Tilak Raj

Reputation: 1499

How to make jQuery load starts when the other load(s) finishes?

I am new to jQuery so I don't know much about it, however I read about the .load() function which makes an ajax connection and shows the result of the page to the specific html element. What I was trying to do was that load three different div on the same page.

Example:

$("#abc1").load("result1.php",{"name:"namex});
$("#abc2").load("result2.php",{"name:"namey});
$("#abc3").load("result3.php",{"name:"namey});

Is there any way to make sure that the other .load() function only run when the first one has loaded and so on?

Upvotes: 0

Views: 41

Answers (3)

Gwendal
Gwendal

Reputation: 1273

You can use a callback.

$( "#abc1" ).load( "result1.php", {"name:"namex}, function() {
    alert( "Load 1 was performed." );
    $( "#abc2" ).load( "result2.php", {"name:"namey}, function() {
        alert( "Load 2 was performed." );
    });
});

Upvotes: 2

Kunj
Kunj

Reputation: 2018

Here is the exact way you want:

$("#abc1").load("result1.php",{"name:"namex}, function(){
    $("#abc2").load("result2.php",{"name:"namey}, function(){
        $("#abc3").load("result3.php",{"name:"namey});
    });
});

Load callback is explained here: http://api.jquery.com/load/

Upvotes: 1

Sumanta736
Sumanta736

Reputation: 705

Try like this:

$("#abc1").load("result1.php", function() {
    $("#abc2").load("result2.php", function(){
        $("#abc3").load("result3.php", function(){
            alert("All load performed.");
        });
    });
});

Upvotes: 1

Related Questions