.load() not loading script tags

Question

I am loading the footer for a website I am creating using the .load() function so I do not have to replace it on each site page everytime time I make a change.

I am using this code to load it currently:

$('.footer_load').load('includes/footer.html footer');

But as I have found out from my research, this only loads the HTML of the footer page, and not any script tags or dynamic content I may have designed into the page.

For example, I have a tag on the footer that automatically updates the copyright year.

What code can I append to what I have above, to not only load the html of the footer, but also any and all scripts and dynamic content that may be within that page?

Help! I have searched high and low, and tried several codes, but cannot get anything to work, and I am at a loss for how to code this / novice in this part of JQuery to write it myself. Thanks a bunch in advance!

Answer 1

Apologies for the verbose answer. Here is how you might want to start. In your example, you mention you want to load new footer HTML and then execute a script manipulating data that's been added to the DOM; in your case a copyright. Here is how I would do it:

Keep your Javascript you want executed out of the new footer HTML file.

// Load the new footer html
$("#footer").load("includes/footer.html", function() {

    // Once HTML is loaded, call your script file that manipulates the data.
    $.getScript("scripts/updateCopyRight.js");
});

---

Now, what might updateCopyRight.js look like? Perhaps something like this:

// Self executing clojure
(function($) {

    // Change the HTML data with the current year.
    $("#SOME_ID_TO_BE_UPDATED").html(new Date().getFullYear())

})(window.jQuery)

This might not be a perfect solution for you, but I hope this maybe gets you on the right path.