Geek Answers Handbook

JQuery - loading page with .load and selector not executing script?

I am trying to load one page into another using the .load () method. This loaded page contains a script that I want to execute when it finishes loading. I put together an example with barebones to demonstrate:

Index.html:

<html> <head> <title>Jquery Test</title> <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#nav a').click(function() { $('#contentHolder').load('content.html #toLoad', '', function() {}); return false; }); }); </script> </head> <body> <div id="nav"> <a href="content.html">Click me!</a> </div> <hr /> <div id="contentHolder"> Content loaded will go here </div> </body> </html>

content.html:

 <div id="toLoad"> This content is from content.html <div id="contentDiv"> This should fade away. </div> <script type="text/javascript"> $('#contentDiv').fadeOut('slow', function() {} ); </script> </div>

When you click on the link, the content should load, and the second paragraph should disappear. However, this is not performed. If I adhere to a simple warning ("") in the script content.html, it also fails.

However, if I do away with the #toLoad selector in the .load () call, it works fine. I am not sure why this is so, since the block is explicitly in the scope of div #toLoad. I do not want to avoid using a selector, since in fact content.html will be a full HTML page, and I only want to select a part from it.

Any ideas? If the script from content.html was in the .load () callback, it works fine, but I obviously don't want this logic to be contained in index.html.

Could I use the .getScript () callback to load "content.html.js" after that and have logic there that seems to work? I would prefer to save the script in content.html, if possible, so that it works fine when loading too. In fact, I could do it anyway, but I would like to know why this is not working.

+6
javascript jquery
source share
5 answers

If you look at the jquery source, you will see that the .load () method simply removes all scripts from the loaded content (if a selector was specified).

  jQuery.ajax({ url: url, type: type, dataType: "html", data: params, complete: function( res, status ) { // If successful, inject the HTML into all the matched elements if ( status === "success" || status === "notmodified" ) { // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div />") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(rscript, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); } if ( callback ) { self.each( callback, [res.responseText, status, res] ); } }
+4
source share

There may be some restrictions on scripts executed from externally loaded content. Some of the Ajax functions will do this, some may not work. For some irrational reason, I expect to use .load() with a content selector to not execute scripts. This is probably an undocumented but intentional behavior.

Remember, you can always use the callback function with .load() , which calls .getScript() .

+1
source share

Why is a JS call a load callback? That would be cleaner

0
source share

Try this function in your finished document.

 <script type="text/javascript"> $(document).ready(function(){ $('#contentDiv').fadeOut('slow', function() {} ); }) </script>

Maybe because JS is trying to execute the function while still creating the DOM. IMO, this approach is not very good for a start. This is similar to accessing public variables in private functions.

0
source share

Why toLoad in a separate document? I would just put toLoad and its children in index.html and set their display: none in your stylesheet, and then bind the jQuery show () and hide () functions to the onclick handler so that things look or disappear.

0
source share

More articles:


All Articles