javascript - .getScript() is not working when loaded from a .load() -
you can see way suppose work visiting: link text
that loading using standard loading.
you can attempt load dynamically here: link text
and simple click "parts" link... can see no alert every comes me.
i have feeling has ability of detecting when fire getscript..as ondomready wouldn't reload when loading dynamically.
here main script load 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 selected class active 1 $('#sub-navigation li.selected').removeclass('selected'); // find parent li of clicked element , add 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 file 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 rest of "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 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 catch jason in answers. have no choice knowledge make ugly work-around follows:
if has idea 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-
have dynamically load different scripts depending on "parts" page loaded. of course can keep using same workaround did before, looking better solution this. have added bounty help.
updated solution: able want mimicing load function using get():
$.get(href, function(response){ var contents = $(response).find('#content-container > *'); $("#content-container").html(contents); }); which more or less jason telling me to; therefore giving him bounty.
updated solution 2: find() command strip out script tags of 1.4+, therefore had 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 still looking avoid complicated mess, seems have live with.
here's relevant bit of code $.load performs insert in jquery 1.4.2 (starting line 4820):
// request remote document jquery.ajax({ url: url, type: type, datatype: "html", data: params, complete: function( res, status ) { // if successful, inject html matched elements if ( status === "success" || status === "notmodified" ) { // see if selector specified self.html( selector ? // create dummy div hold results jquery("<div />") // inject contents of document in, removing scripts // avoid 'permission denied' errors in ie .append(res.responsetext.replace(rscript, "")) // locate specified elements .find(selector) : // if not, inject full result res.responsetext ); } if ( callback ) { self.each( callback, [res.responsetext, status, res] ); } } }); as can see, if selector specified in content loaded (which are), jquery remove inline script blocks html before inserting page.
why? creation of dom document fragment on fly not @ consistent across browsers, , there's no real way control when, how, or if script(s) executed.
one example be: should happen when fragment created (as jquery does, before runs selector on it)? in case, new content won't part of parent document when script ran.
how can work around this? well, can recreate $.load() internally, (essentially issue request, create jquery object response, call .find(selector) on before appending/injecting). but, beware. may unreliable, , have no idea how different browsers may react this.
i remember reading long discussion while back--i can't find right now, when do, i'll add link here.
Comments
Post a Comment