Check if jQuery has loaded with Javascript

Question

I am adding jQuery in dynamically due to the requirements of my project. However, when the below function is called jQuery is not defined is displayed in the console. However, if I write alert(jQuery) in the console it returns function (a,b){return new m.fn.init(a,b)}, so I know that it is loaded. Does anyone have any suggestions?

function AddExternals(){
  if (!jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  } else {
    console.log("jQuery already exists.")
  }
}

How is AddExternals() is called? Remember, you're checking for jQuery after the DOM has completely loaded. — Adam Azad
– Adam Azad, Commented Dec 21, 2015 at 10:56
I am checking using document.addEventListener("DOMContentLoaded", AddExternals) — Mike Resoli
– Mike Resoli, Commented Dec 21, 2015 at 10:58
How is the console displaying jQuery is not defined? you must be calling something else which relies on it as your console.log() in the code you shared doesn't say that anywhere - I'm guessing you're calling something after this? — StudioTime
– StudioTime, Commented Dec 21, 2015 at 11:04
... That's the error I receive in the console... I am calling nothing else anywhere at that point in time. It's triggered by if (!jQuery){. — Mike Resoli
– Mike Resoli, Commented Dec 21, 2015 at 11:07

Adam Azad · Accepted Answer · 2015-12-21 12:26:18Z

1

You can use window.jQuery to validate if jQuery has been loaded or not

function AddExternals(){
  if (!window.jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  } else {
    console.log("jQuery already exists.")
  }
}

AddExternals();

WORKING DEMO

Note: According to js convention pascal case is used when it is a constructor function .For example

var adder = new Function('a', 'b', 'return a + b');

edited Dec 21, 2015 at 12:26

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

answered Dec 21, 2015 at 11:36

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Comments

Jae Sung Park · Accepted Answer · 2015-12-21 11:19:29Z

If you need to load in certain moment(not right after page load), make some function like this.

It checks script load binding event.

function loadFile(url, callback) {
    var d = document.head || document.getElementsByTagName("head")[0];
    var s = document.createElement("script");

    s.type = "text/javascript";
    s.src = url;
    s.charset = "utf-8";
    d.appendChild(s);

    if(callback) {
        if(s.addEventListener) {
            s.onload = callback;
        } else if(s.readyState) {
            s.onreadystatechange = function() {
                s.readyState === "loaded" && callback();
            };
        }
    }
}

// load JS file dynamically.
loadFile("https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js", function() {
  // it will call right after file has been loaded
  alert(jQuery.fn.jquery);
});

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-21 10:56:13Z

0

You can check this way, instead of using (!jQuery):

if (typeof jQuery == "undefined") {

answered Dec 21, 2015 at 10:56

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

1 Comment

Mike Resoli Over a year ago

Even if jQuery has been loaded it still runs as if it is not.

Community · Accepted Answer · 2017-05-23 11:44:53Z

0

From here

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

So, move move your function to window.onload event

window.onload = function() { 
   AddExternals() 
};

And go with Praveen's advice.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 21, 2015 at 11:02

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Comments

Jai · Accepted Answer · 2015-12-21 11:15:49Z

0

I feel you have to use a timer to check after appending a script:

function AddExternals(){

  var timer;

  if (!jQuery){
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
    console.log("Added jQuery!");
  }else{
    console.log("jQuery already exists.")
  }

  timer = setInterval(checkIfjqLoaded, 1000);

  function checkIfjqLoaded(){
     if(timer){
       clearInterval(timer);
       AddExternals();
     }
  }

}

answered Dec 21, 2015 at 11:15

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Check if jQuery has loaded with Javascript

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related