...

View Full Version : 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 */

<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*/


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


$(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*/


<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:

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum