Ajax load javascript and css with content

Question

I am using jquery ajax to load content from one page into a div on the current one, similar to the way gmail switches between inbox, trash, etc. I am using jQuery's load method

$("#divGlobal").load("newPage.html #container");

to load the content I need into my div.

newpage.html #container also has associated javascript & css files associated with it. Right now I am loading them by appending the necessary <script> and <link> tags to <head> but it does not always work. The files always load (I am watching XHR info in Firefox) but do not always seem to work correctly.

For instance, if I load page1.html & associated files (including jQuery functions for UI), everything works fine. However, if I then load page2.html and go back to page1.html, the files load but the jQuery functions are not responding.

Is there a better way of loading javascript & css files associated with the content I am loading?

Loading content in this manner is a very bad idea; it makes pages harder to maintain, and even opens up possible XSS vulnerabilities. Instead of sending entire html pages (complete with duplicate <html>, <head>, and <body> tags), consider using AJAX to load only necessary page data in a pure data syntax like JSON. Other options include loading everything at once (less HTTP requests), or even using an iframe where appropriate. — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Aug 4, 2012 at 1:00

jfriend00 · Accepted Answer · 2012-08-04 00:39:59Z

1

Reloading the same javascript that you have previously loaded may not do what you want because all the variables and functions are already defined from the previous load and some state may already be in place from the previous load. Loading it again into the same page doesn't start from scratch which is probably what you want.

If you control the pages you're loading, then you can write the javascript in a way that will work by just having the scripts in the content load specifically designed so that they set the state exactly how you want it and clean up any previously loaded state, but you would have to write them that way in order to work that way. This would include resetting any DOM modifications, event handlers, global variables, etc... that the first invocation of the script may have modified.

edited Aug 4, 2012 at 0:39

answered Aug 4, 2012 at 0:09

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

Collectives™ on Stack Overflow

Ajax load javascript and css with content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related