You can see the way its suppose to work by visiting:
link text
That is loading everything using standard loading.
You can attempt to get it to load dynamically here:
link text
and then simple just click the “Parts” link… As you can see no alert every comes to me.
I have a feeling it has to do with the ability of detecting when to fire the getscript..as ondomready wouldn’t reload when loading dynamically.
Here is the main script that will load the content:
$('#sub-navigation li a').click(function(){
var toLoad = $(this).attr('href')+' #content-container > *';
$('#content-container').hide('fast',loadContent);
var href = $(this).attr('href');
if (href == ".") {
window.location.hash = "";
} else {
window.location.hash = href;
}
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
//$('#load').remove();
//$('#wrapper').append('<span id="load">LOADING...</span>');
//$('#load').fadeIn('normal');
function loadContent() {
$('#content-container').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content-container').show('normal',hideLoader());
}
function hideLoader() {
//$('#load').fadeOut('normal');
}
return false;
});
Here is the file that gets loaded:
<div id="sub-navigation-content" class="transparent">
</div>
<div id="content-container" class="transparent">
<div id="content">
<link rel="stylesheet" type="text/css" href="/files/tablesorter/themes/blue/style.css">
<script type="text/javascript">
$(document).ready(function () {
$.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
$("#parts").tablesorter();
alert('sort performed');
});
});
</script>
!!!!!!! INSERT MORE HTML HERE !!!!!!!
</div>
</div>
here is the rest of the “INSERT MORE HTML HERE”:
<h1>Parts</h1>
<table id=parts class=tablesorter style="width: 500px;">
<thead>
<tr>
<th>Part #</th>
<th>Part Description</th>
<th>Price</th>
<th>Additional<br>Shipping</th>
</tr>
</thead>
<tbody>
<tr>
<td>AM01</td>
<td>ECONOMY OARS (EACH)</td>
<td>$30.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM02</td>
<td>DELUXE OARS (EACH)</td>
<td>$42.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM03</td>
<td>OAR LOCKS (PAIR)</td>
<td>$10.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AM04</td>
<td>LAKER BOW CASTING</td>
<td>$25.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM05</td>
<td>PRO BOW CASTING</td>
<td>$25.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM06</td>
<td>OAR LOCK CASTING W/INSERT</td>
<td>$28.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM07</td>
<td>REAR CORNER CASTING RIGHT</td>
<td>$25.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM08</td>
<td>REAR CORNER CASTING LEFT</td>
<td>$25.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM09</td>
<td>FISHERMAN BOW SET (3 PC.)</td>
<td>$25.00</td>
<td>$3.00</td>
</tr>
<tr>
<td>AM10</td>
<td>OAR LOCK INSERTS (EACH)</td>
<td>$4.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AM11</td>
<td>DRAIN PLUG (5/8 MODIFIED)</td>
<td>$5.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AC06</td>
<td>LIFT VEST TYPE III</td>
<td>$25.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AC07</td>
<td>1" DRIAN PLUG</td>
<td>$5.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AC09</td>
<td>5/8" DRAIN PLUG</td>
<td>$5.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AM11</td>
<td>TOUCH UP PAINT</td>
<td>$15.00</td>
<td>$2.00</td>
</tr>
<tr>
<td>AM69</td>
<td>CONSOLE (SUPER PRO 16)</td>
<td>$135.00</td>
<td>Please call</td>
</tr>
<tr>
<td>AM70</td>
<td>CONSOLE W/STEERING (SUPER PRO 16)</td>
<td>$430.00</td>
<td>Please call</td>
</tr>
</tbody>
</table>
As per the catch by jason in the answers. I have no choice to my knowledge than to make an ugly work-around as follows:
If anyone has an idea that is more elegant, please let me know.
function showNewContent() {
$('#content-container').show('normal',hideLoader);
if (href == "parts") {
$.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
$("#parts").tablesorter();
});
}
}
Edit: 12/18/2010-
I now have to dynamically load different scripts depending on which “parts” page is loaded. Of course I can keep using the same workaround I did before, but I am looking for a better solution for this. I have added a bounty to help.
updated solution:
I was able to do what I want by just mimicing the load function using get():
$.get(href, function(response){
var contents = $(response).find('#content-container > *');
$("#content-container").html(contents);
});
Which is more or less what Jason was telling me to to; therefore I am giving him the bounty.
updated solution 2:
the find() command will strip out any script tags as of 1.4+, therefore I had to do this:
$.get(href, function(response){
var contents = $(response).find('#content-container > *');
$(response).filter('script[src=""]').each(function(){
contents.push(this);
});
$("#content-container").html(contents);
});
I am still looking to avoid this complicated mess, but it seems this is what I will have to live with.
Here’s the relevant bit of code from $.load that performs the insert in jQuery 1.4.2 (starting line 4820):
As you can see, that if a selector is specified in the content to be loaded (which you are), jQuery will remove all inline script blocks from the HTML before inserting it into the page.
Why? The creation of a DOM document fragment on the fly is not at all consistent across browsers, and there’s no real way to control when, how, or even if the script(s) will get executed.
One example would be: Should it happen when the fragment is created (as jQuery does, before it runs the selector on it)? In this case, your new content won’t actually be part of the parent document when the script is ran.
How can you work around this? Well, you can always recreate what $.load() does internally, (essentially just issue a GET request, create a jQuery object from the response, then call
.find(selector)on it before appending/injecting). But, beware. This may be unreliable, and I have no idea how different browsers may react to this.I remember reading a long discussion about exactly this a while back–I can’t find it right now, but when I do, I’ll add a link here.