jQuery loaded within a Javascript ( js ) file

This is a very simple script that should load jQuery. I can see in the Firebug Scripts tab that jquery is loading but I get '$ is not defined" errors when I try to use it. Can anyone help me understand what's wrong?

//function to add scripts
function include(file)
{
    var script  = document.createElement('script');
    script.src  = file;
    script.type = 'text/javascript';
    script.defer = true;     
    document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

//See if jQuery is working
$(document).ready(function() {
    $('#internal').show();
})

////////////
//RETURNS: "$ is not defined $(document).ready(function() {"

The odd thing is if don't try to use jQuery in this same script instead I load another js file that uses jQuery it does work

//function to add scripts
function include(file)
{
    var script  = document.createElement('script');
    script.src  = file;
    script.type = 'text/javascript';
    script.defer = true;     
    document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

//add my custom script that wants to use jQuery
include('scripts/testScript.js')

testScript.js

$(document).ready(function() {
    $('#external').show();
})

I appreciate any advice with this.

I'm guessing it's because the browser will only execute the JavaScript in the script node you added after it finishes executing the current file.

The browser will execute your current script in one thread. When it gets to the end of your script, it executes the next script in the DOM. It can't stop running through one script to jump to the next one.

You might want to have a look at Google's JavaScript loader. The way that works is that you tell it to load an external js file, and register a callback to execute when that file is loaded.

You can do it with a callback, because the code within the callback will only be executed after the browser has finished executing the current file and moved onto the next one. What you can't do though is make the browser switch from one js file to another on the fly (i.e. when it is first executing the content of the file).

As explained in the other answers, jquery is loaded asynchronously, so by the time you call $(document).ready(), jquery is net yet loaded. You can avoid this by adding your own code to an onload event handler of the script-element:

function include(file){
  var script  = document.createElement('script');
   script.src  = file;
   script.type = 'text/javascript';
   script.defer = true;
   script.onload= function(){
      $(document).ready(function() {
        //your code here
      })
   }
   document.getElementsByTagName('head').item(0).appendChild(script);
 }
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

Look here for an example: http://jsfiddle.net/CrReF/

When you dynamically add a script file as you are doing, the file is not executed until the rest of your javascript is executed; thus in example one jQuery source is pushed down below the jQuery code, and therefore returns undefined.

The reason code sample two works is because you have two files added dynamically, and they get pushed down to the bottom in the order they were added, so the jQuery source executes, and then it executes your jQuery code.

So, by using javascript to load jQuery, you're loading the file asynchronously. Your code will begin to load jQuery and then move on to call your document.ready code, which will fail because jQuery hasn't finished loading or began executing.

When you use two includes it is loading each file so by the time the second file gets executed, the first has already been executed, and thats why it works.

You really need to set up a callback so that once jQuery is done loading, it will do the document ready tasks as well as run any other code which requires jQuery.