jQuery .load is not loading the javascript on the other page

510carlos · 12-29-2009, 02:12 AM

I am using the load function in jquery. When i load the remote page the HTML loads fine, but the JavaScript that was on the page was not loaded.

Does the load function only inject HTML to the DOM?
If so, is there any other way to achieve what I am trying to do?

Fumigator · 12-29-2009, 07:09 PM

I tried this out myself and apparently any script tags found in the HTML that is to get loaded gets executed rather than brought over and added to the DOM like other tags.

s32ialx · 01-21-2010, 12:58 AM

Has anyone got an answer to his question because i have the same problem i will post my code

It's a ajax/jquery switch I'll paste the corresponding code

/* Links */

Code:

<ul id="menu">
          <li><a id="home">Home</a></li>
          <li><a id="about">About Me</a></li>
          <li><a id="shop">My Shop / Wishlist</a></li>
          <li><a id="friend">My Friends</a></li>
          <li><a id="vids">Wicked Videos</a></li>
          <li><a id="music">Music Playlist</a></li>
          <li><a id="pics">My Pictures</a></li>
          <li><a id="ranks">My Rankings</a></li>
          <li><a id="stuff">Random Stuff</a></li>
          <li><a id="read">Read Messages</a></li>
          <li><a id="leave">Leave a Message</a></li>
</ul>

/* Content Div*/

Code:

<div id="content">
        <div id="loading">  
            <img src="images/loading.gif" alt="Loading..." />  
        </div>
</div>

/*JS Switch*/

Code:

$(document).ready(function(){
    //References
    var sections = $("#menu a");
    var loading = $("#loading");
    var content = $("#content");
    
    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
                case "home":
                case "about":
                case "shop":
                case "friend":
                case "vids":
                case "music":
                case "pics":
                case "ranks":
                case "stuff":
                case "read":
                case "leave":
                    content.slideUp();
                    content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
                    content.slideDown();
            break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
            break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

NOW for where the JS won't load

/*Section html*/

Code:

<div id="home_section">
Home haha
</div>

<div id="about_section">        
<center>HEHE About</center>
<script type='text/javascript'>
imvu_avatar_name = "TheDarkRaver";
imvu_panel_name = "rankings_panel";
imvu_section_name = "mp_right";
imvu_panel_width = 320;
imvu_panel_height = 228;
</script>
<script type='text/javascript'
src='http://www.imvu.com/catalog/web_panel_js.php'>
</script>
</div>

<div id="shop_section">
Shop
</div>

Gremlyn1 · 01-21-2010, 05:34 PM

When you load a page via AJAX, you need to reattach the event handlers to that page. Javascript will only work with what was present at the time the page loaded. jQuery has .live event that helps reattach the handlers and there are a couple of plugins, such as livequery, that are a little more robust, at least before 1.4. Not sure what they've changed, if anything, with .live in 1.4.

For example, with .click events you will want to use something like:

Code:

$("#div").live('click', function() {});

http://docs.jquery.com/Events/live