How to include jQuery library in Javascript without <script src="">

Question

I need to include jQuery library in javascript file (john.js) remotely. I have tried this without any luck;

(function(d, t) {
    var g = d.createElement(t), // create a script tag
        s = d.getElementsByTagName(t)[0]; // find the first script tag in the document
    g.src = 'http://code.jquery.com/jquery-latest.js'; // set the source of the script to your script
    s.parentNode.insertBefore(g, s); // append the script to the DOM
}(document, 'script'));

$( document ).ready(function() {

// My jquery works here

});

I want to fetch a script in javascript way. What is the correct way to do that ?

Have you looked at jQuery's getScript() function? api.jquery.com/jquery.getscript — Nate
– Nate, Commented Dec 6, 2014 at 3:18
I want to fetch Jquery, not js. And how you can use, when you havent include the jquery library ? getScript() is a jQuery function, not javascript. — user198989
– user198989, Commented Dec 6, 2014 at 3:21
But have you looked at getScript() in the sense of examining its code to see how it works? — nnnnnn
– nnnnnn, Commented Dec 6, 2014 at 3:24
I know that script mate. But As I said, Its JQUERY function. I need to make it in javascript way. — user198989
– user198989, Commented Dec 6, 2014 at 3:27
jQuery is written 100% in JavaScript, so obviously anything jQuery can do is doable in plain JavaScript. So, again, if you examine the jQuery source code for getScript() you can see how it works and include some version of that yourself. — nnnnnn
– nnnnnn, Commented Dec 6, 2014 at 3:36

rnrneverdies · Accepted Answer · 2014-12-06 05:09:09Z

3

The error here is that JQuery is not loaded yet when this code is executed:

$(document).ready(function() { .. }

As is, you get an error like this: $ is undefined (or similar)

You should use the onload event of created script element to be sure it is loaded Jquery.

This sample shown how you can achieve your goal. Good Luck.

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://code.jquery.com/jquery-latest.js'; // set the source of the script to your script
newScript.onload = function() {
  alert("Script is ready!");
  $(document).ready(function() {
    alert("JQuery is ready!");
  });
};
var head = document.getElementsByTagName("head")[0];
head.appendChild(newScript);

edited Dec 6, 2014 at 5:09

answered Dec 6, 2014 at 3:34

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:21:27Z

1

Here is the answer on how to fetch, coming from an other post :

Adding <script> element to the DOM and have the javascript run?

That beeing said another issue you may have is that when you call your

$( document ).ready(function() {

// My jquery works here

});

Jquery may not be loaded yet

so you can try a recursive function to check if jquery has been loaded with something like that (not teste)...

function launch(callBack){
    if (window.jQuery) {  
       callBack();
    } else {
        setTimeout(function(){launch(callBack);},100);
    }
}
launch(function(){
   $( document ).ready(function() {
     // My jquery works here
   });
});

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Dec 6, 2014 at 3:39

MrVinz

8746 silver badges15 bronze badges

Comments

risto · Accepted Answer · 2014-12-06 03:48:55Z

1

You can use a combination of an XMLHttpRequest and eval to fetch the javascript file dynamically like getScript does for jQuery.

See my fiddle.

edited Dec 6, 2014 at 3:48

answered Dec 6, 2014 at 3:19

risto

1,3049 silver badges11 bronze badges

4 Comments

user198989 Over a year ago

No, I want to fetch Jquery, not js. getScript is a jquery function, and it cant work when you havent include the jQuery Library

user198989 Over a year ago

As of my knowledge, xmlhttprequest sends request to a webpage, how can that fetch the script. Possible to show me a quick example ?

risto Over a year ago

See my fiddle. Don't forget to accept and/or upvote my answer if it answered your question! I'm looking to get some points.

charlietfl Over a year ago

absolutely no need to use eval to do this

eniacAvenger · Accepted Answer · 2014-12-06 05:46:24Z

0

Typically the jquery is called in the html file before custom javascript files are called:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="app.js"></script>

answered Dec 6, 2014 at 5:46

eniacAvenger

88312 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to include jQuery library in Javascript without <script src="">

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related