How to include jquery.js in another js file?

Question

I want to include jquery.js in myjs.js file. I wrote the code below for this.

 var theNewScript=document.createElement("script");
 theNewScript.type="text/javascript";
 theNewScript.src="http://example.com/jquery.js";
 document.getElementsByTagName("head")[0].appendChild(theNewScript);
 $.get(myfile.php);

There shows an error on the 5th line that is '$ not defined'. I want to include jquery.js and then want to call $.get() function in myjs.js file. How can I do this? Please help me

• Calum: Why are you trying to use $.get() outside of a page?
• Salman Arshad: I assume you meant to say $.get("myfile.php"); instead of $.get(myfile.php);.
• Ciro Santilli OurBigBook.com: possible duplicate of check if jquery has been loaded, then load it if false

Answer 1

Appending a script tag inside the document head programmatically does not necessarily mean that the script will be available immediately. You should wait for the browser to download that file, parse and execute it. Some browsers fire an onload event for scripts in which you can hookup your logic. But this is not a cross-browser solution. I would rather "poll" for a specific symbol to become available, like this:

var theNewScript = document.createElement("script");
theNewScript.type = "text/javascript";
theNewScript.src = "http://example.com/jquery.js";
document.getElementsByTagName("head")[0].appendChild(theNewScript);
// jQuery MAY OR MAY NOT be loaded at this stage
var waitForLoad = function () {
 if (typeof jQuery != "undefined") {
 $.get("myfile.php");
 } else {
 window.setTimeout(waitForLoad, 1000);
 }
};
window.setTimeout(waitForLoad, 1000);

• Christophe: Which browsers do not support onload events? It's working fine for me even in older browsers like IE 7.
• Salman Arshad: I have read (but not personally confirmed) that onload event for script tags work in gecko, opera, etc whereas for IE you need to hook onreadystatechange. See unixpapa.com/js/dyna.html and blog.lexspoon.org/2009/12/…
• Christophe: It's true that the way you call the event handler depends on the browser. I use addEventListener for modern browsers and attachEvent for old IE, works just fine.

Answer 2

The problem is that the script doesn't load instantly, it takes some time for the script file to download into your page and execute (in case of jQuery to define $).

I would recommend you to use HeadJS. then you can do:

head.js("/path/to/jQuery.js", function() {
 $.get('myfile.php');
});

Answer 3

Simple answer, Dont. The jQuery file is very touchy to intruders so dont try. Joining other files into jQuery file will often cause errors in the JS console, PLUS jQuery isn't initialized until the file is loaded into main document.

Sorry, scratch that. Didnt quite know what you were doing.

Try this:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://domain.com/jquery.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);

Answer 4

I used this code before, and it worked:

var t=document;
var o=t.createElement('script');
o=t.standardCreateElement('script');
o.setAttribute('type','text/javascript');
o.setAttribute('src','http://www.example.com/js/jquery-1.3.2.js');
t.lastChild.firstChild.appendChild(o);