Question

I’m trying to load html into a skin (header/footer with nav buttons) that has also been loaded from an external html file. Here’s the code in jsfiddle although it won’t work because I can’t put the two external files into jsfiddle:

http://jsfiddle.net/J4yUt/1/

This is the content in the two external files:

medbox.html:

<div id="medBox"></div>

smallBox.html:

<div id="smallBox"></div>

When I click the button, the medium box appears in the big box, but the small box doesn’t appear in the medium box. I think the code to load the smallbox.html executes before the medBox.html has fully loaded, so how do I get it to wait for the medBox.html to fully load?

This is what I want the result look like:

http://jsfiddle.net/Sv4yf/2/

Answer 1

$("#bigBox").load("medBox.html", function(){
   $("#medBox").load("smallBox.html");
});

Use a callback function in your first load handler.

Read more: http://api.jquery.com/load