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

I assume you meant to say `$.get("myfile.php");` instead of `$.get(myfile.php);`. — Salman A, Apr 07 '11 at 08:22
possible duplicate of [check if jquery has been loaded, then load it if false](http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false) — Ciro Santilli OurBigBook.com, Jun 01 '14 at 08:25

Salman A · Accepted Answer · 2011-04-07T08:22:13.120

12

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);

edited Apr 07 '11 at 08:22

answered Apr 07 '11 at 08:15

Salman A

262,204
82
430
521

Which browsers do not support onload events? It's working fine for me even in older browsers like IE 7. – Christophe Mar 05 '13 at 17:56
1

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 http://unixpapa.com/js/dyna.html and http://blog.lexspoon.org/2009/12/detecting-download-failures-with-script.html – Salman A Mar 05 '13 at 18:11
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. – Christophe Mar 05 '13 at 18:15

score 4 · Answer 2 · answered Apr 07 '11 at 08:04

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');
});

score 0 · Answer 3 · answered Apr 07 '11 at 08:04

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);

score 0 · Answer 4 · answered Apr 07 '11 at 08:06

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);

How to include jquery.js in another js file?

4 Answers4

Linked

Related