Load a Javascript and execute it...

Question

I have a website that loads once and then each time a user clicks a button instead of loading a new page, the content is just replaced via ajax. However on one of the pages I'm using jquery-ui and for example, if I land in "index.html" and then click to go to that page the script is not loading but if I go directly to that page the script does load correctly. I've tried to condition the loading of the script by doing.

    var hash = window.location.hash.substr(1);
    var a = window.location.href.lastIndexOf("dev.html");
    var b = window.location.href.lastIndexOf(".html");
    var l = window.location.href.substring(a,b);

    $(document).bind('ready',function(){

         if((hash == "dev") || ((l == "dev") && (hash != dev)) || (l == hash)){
          //$('#tabs').html("<script type=\"text\/javascript\" src=\"assets\/js\/tabs-ui-init.js\"\/><\/script>");
$.ajax({
        type: "GET",
        url: "assets/js/tabs-ui-init.js",
        dataType: "script"
      });

         }
    });

But the script won't load anyway...what am I doing wrong? I've tried to load it via $.getScript() and some other ways like instead of .bind using .live and binding to load and unload but no success...the way this site is loaded is like explained in here :http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

---

Edit @Jim Davis: I think this is just what I need, just why isn't it running ?? I made the reference for the Content as the scripts it'll load and the Panel is a div where to place those scripts still the code isn't running on page load =/

Answer 1

There are two things in this regard that have bitten me in the past.

The simplest is that in IE (6 at least, perhaps not 8) there's an odd bug where script/style/link type tags must appear AFTER displayable content (I think that IE needs to display something - anything - to "initialize" the document model). I pulled my hair out for two days on a project two years ago... finally realized that if I just moved the style and script tags to the bottom of the page everything seemed to work.

When loading content script sometimes never gets initialized properly - however you can force it. I've a function in my PanelManager abstraction to do this:

 // Load Content
Panel.load = function(Content) {

  // "null" the old (to clear it)
 Panel.innerHTML = null;

  // Load the content
 Panel.innerHTML = Content;

  // Load Scripts
 var AllScripts = Panel.getElementsByTagName("script");
 var AllScriptsCnt = AllScripts.length;
 for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
  var CurScript = document.createElement('script');
  CurScript.type = "text/javascript";
  CurScript.text = AllScripts[Cnt].text;
  Panel.appendChild(CurScript);
 };

};

Look at the "Load Scripts" section - it scans the new content for "script" tags and then forces the creation of script elements with the same content - works a treat for me. (Note that in this context "Panel" is just a reference to an element - usually a DIV containing the new content.)

Hope this helps.