CODEWITHSUNDEEP
javascriptjqueryhtml
Mike Resoli
Mike Resoli

Reputation: 967

Check if jQuery has loaded with Javascript

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.")
  }
}

Upvotes: 2

Views: 8000

Answers (5)

brk
brk

Reputation: 50291

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

Upvotes: 1

Jae Sung Park
Jae Sung Park

Reputation: 900

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

Upvotes: 1

Jai
Jai

Reputation: 74738

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

}

Upvotes: 0

Adam Azad
Adam Azad

Reputation: 11297

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.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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

if (typeof jQuery == "undefined") {

Upvotes: 0

Related Questions