How To Load Html Into A "skin" That Has Also Been Loaded From An External Html File?

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 becaus

Solution 1:

Just use .load()'s callback:

$("#bigBox").load("medBox.html", function(response, status, xhr) {
    if (status == 'success') {
        $("#medBox").load("smallBox.html");
    }
});

.load() sends an AJAX request, which is asynchronous and doesn't block the execution of code after it.

Solution 2:

$("#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