0

I have my html content as

<div id="externalContent"></div>
<script src="jquery.js"></script>
<script>
    console.log("the number of div elements before loading tempfile are " +$("div").length)
    $('#externalContent').load('tempfile.html')
    console.log("the number of div elements after loading tempfile are " + $("div").length)
    $('#externalContent').append('temp.html contents loaded above...')
    setTimeout(function(){
        console.log("the number of div elements in page after timeout are " + $("div").length)
    }, 5000)
</script>

It does simple stuff. It loads an external file, tempfile.html that has 1000 div elements using $.load, and immediately prints the number of div elements in the console.

The output is,

the number of div elements before loading tempfile are 1
the number of div elements in page after loading tempfile are 1
the number of div elements in page after timeout are 1001

So, why does the second log statement that is printed after $.load show the number of elements as one? If dom loading (via $.load, $("...").html("blah..blah..") etc...) is an asynchronous task, how can i ensure that dom gets loaded completely?

Note: tempfile.html is a bulk file that has 1000 div elements as,

<div id="1">1</div><div id="2">2</div><div id="3">3</div>..... <div id="1000">1000</div>
Improve this question
5
  • 8
    .load() is indeed asynchronous. You can pass a callback function to .load(), and that will be called when loading is complete. Commented Jul 23, 2015 at 14:32
  • @Pointy, is it the case with $.html(".....") also? like if i am fetching tempfile.html via an ajax call, and setting its content using $.html. does $.html load 1000 elements immediately? Commented Jul 23, 2015 at 14:35
  • 1
    There's no such thing as $.html(). If you're talking about the .html() method, then no, that's not asynchronous. .load() is asynchronous because it inherently involves a network operation (the HTTP request). The .load() function is just a convenience API on top of $.ajax(). Doing your own ajax call and then using .html() is essentially what .load() does, in other words. Commented Jul 23, 2015 at 14:37
  • As pointy mentioned, using callback functions are the best way of dealing with that type of situation. Just throw your other stuff in the callback and it'll load first before executing the rest of those lines. Commented Jul 23, 2015 at 14:38
  • thanks Pointy.... your comments are the answer... Commented Jul 23, 2015 at 14:42

2 Answers 2

Reset to default
4

You should use callback function, because the request is asynchronous.

$('#externalContent').load('tempfile.html', null, function() {
    console.log("the number of div elements after loading tempfile are " + $("div").length);
});

See jQuery API Documentation.

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

1 Comment

Take note that the second parameter of the load function is optional, so you don't have to null it or even include it at all. .load('tempfile.html', function() {}); works just as well. However, if you ever need to feed over some data from one page to the next, that 2nd parameter is your friend.
1

As Pointy commented, you need to use a callback which you pass into .load(), because jQuery will call it only after it's finished the asynchronous call. This is something you will come across a lot. See - http://api.jquery.com/load/

The example here is the one you want -

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.