Jquery

Question

I'm trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I've put together a barebones example 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 the link is clicked, the content should load and the second paragraph should fade away. However it doesn't execute. If I stick a simple alert("") in the script of content.html it doesn't execute either.

However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don't want to avoid using the selector, as in reality the content.html will be a full HTML page, and I'll only want a select part out of it.

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

I could possibly have the callback use .getScript() to load "content.html.js" afterwards and have the logic in there, that seems to work? I'd prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn't work.

Matt · Accepted Answer

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] );
            }
        }

Samantha Branham · Answer

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

Remember, you can always use a callback function with .load() that invokes .getScript().

Jquery - Loading a page with .load and selector doesn't execute script?

Tags:

javascript

Kasaku

2 Answers

Matt

Samantha Branham

Recent Activity

Donate For Us