title: Load jQuery in a js, then execute a script that depends on it
body: <p>I have a unique issue -</p>
  
  <p>I am designing a web application that creates widgets that a user can then embed in their own page (blog posts, mostly). I want them to just have to embed one line, so I just had that line be an include statement, to pull a Javascript off my server. </p>
  
  <p>The problem is, I am building the widget code using jQuery, and I need to load the jQuery plugin, since I obviously don't know whether or not my users will have it available. I thought 'this should be pretty simple'....</p>
  
  <pre><code>function includeJavaScript(jsFile) {
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
  
  includeJavaScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
  jQuery();
  </code></pre>
  
  <p>So, I am appending the jQuery file to the head, then afterwards, trying to run a jQuery function. Trouble is, this doesn't work! Everytime I run it, I get the error that variable jQuery is not defined. I have tried a few things. I tried putting the jQuery functions in an onLoad trigger, so that the whole page (including, presumably, the jQuery file) would load before it called my script. I tried putting the jQuery function in a seperate file, and loading it after loading the jQuery lib file. But I get the idea I'm missing something simple - I'm new to jQuery, so if I'm missing something obvious, I apologize...</p>
  
  <p>EDIT</p>
  
  <p>OK,I tried the suggestion offered by digitalFresh, as follows (using Safari 5, if that helps), but I still get the same error?</p>
  
  <pre><code>function test() {
      jQuery()
  }
  
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
  script.onload = test(); //execute
  document.body.appendChild(script);
  </code></pre>
  
  <p>EDIT</p>
  
  <p>OK, I FINALLY got it to work, in an offhand suggestion from Brendan, by putting the call ITSELF in an 'onload' handler, like so:</p>
  
  <pre><code>function addLoadEvent(func) { 
        var oldonload = window.onload; 
        if (typeof window.onload != 'function') { 
          window.onload = func; 
        } else { 
          window.onload = function() { 
            if (oldonload) { 
              oldonload(); 
            } 
            func(); 
          } 
      } 
  } 
  addLoadEvent( function() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
      document.body.appendChild(script);
      jQuery();
  });
  </code></pre>
  
  <p>At this point, as you can see, I don't even have to put it in an 'onload' - it just works. Though I have to admit, I still don't understand WHY it works, which bothers me...</p>