load two jQuery if not loaded

Question

I was working on the jQuery plugin by using jQuery UI. In this script http://alexmarandon.com/articles/web_widget_jquery/ Author is only checking whether jQuery library added is or not. But I need to check for both jQuery and jQuery UI.

If not loaded then load it. When I tried to do this then due to synchronous process I get error jQuery/jQuery-ui is not defined can you please help me with that.

Thanks

(function() {
  
  // Localize jQuery variable
  var jQuery;
  
  /******** Load jQuery if not present *********/
  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.10.2') {
    console.log('In if of index js');
      var script_tag = document.createElement('script');
      script_tag.setAttribute("type","text/javascript");
      script_tag.setAttribute("src",
          "https://code.jquery.com/jquery-1.10.2.js");
     
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
      loadui();
      
  } else {
    console.log('Index end of first if');
    
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
     // main();
  }
  
  /******** Called once jQuery has loaded ******/
  function scriptLoadHandler() {
    
    console.log('Index loaded');
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      jQuery = window.jQuery.noConflict(true);
      // Call our main function
      loadui();
  }
  
  function script2LoadHandler() {
    
    console.log('Index2 loaded');
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      
     main()
     
  }
  /******** Our main function ********/
  function main() {  
    setTimeout(myFunction, 3000);
    
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src",
            "js/scripts.js");
        
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
   
  }

  function myFunction(){

  console.log("asdasdasdasdas");
  }

  
  function loadui(){
    console.log('Loadui2');
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://code.jquery.com/ui/1.10.4/jquery-ui.js");
  
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    main();

  }
  
  })();

@Doomenik I added the code. It's in the index.ja file I am just calling it from html file — Khushhal, Oct 24 '17 at 05:48

Akshay Hegde · Answer 1 · 2017-10-24T06:19:51.380

This is how to check whether library loaded or not

var s;
if (typeof jQuery === 'undefined'){
   // jquery not loaded 
      s = document.createElement('script');
      s.src = "https://code.jquery.com/jquery-3.2.1.js";
     document.head.appendChild(s);
}

if (typeof jQuery.ui === 'undefined'){
   // jquery ui not loaded
   s = document.createElement('script');
      s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
     document.head.appendChild(s);
}

This is how to load one can load one after another when there is dependency.

var s;
if (typeof jQuery === 'undefined') {

  // jquery not loaded 
  s = document.createElement('script');
  s.src = "https://code.jquery.com/jquery-3.2.1.js";
  document.head.appendChild(s);

  // jquery load
  s.onload = function() {

      // jquery ui you cant load without jquery so
      s = document.createElement('script');
      s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
      document.head.appendChild(s);
  
      // jquery version
      console.log(jQuery.fn.jquery);

      // jquery ui load
      s.onload = function() {

         // jquery ui version
         console.log(jQuery.ui.version);
      }
  }
}

I tried this but I am getting error "indexui.js:32 Uncaught ReferenceError: jQuery is not defined" In line " if (typeof jQuery.ui != "undefined"){ //check if jQueryui library has been loaded" — Khushhal, Oct 24 '17 at 06:07

Jereme · Answer 2 · 2017-10-24T05:52:53.637

0

As answered in this post you can do a condition by checking its type

if (typeof jQuery != "undefined"){   //check if jQuery Exists 

    if (typeof jQuery.ui != "undefined"){  //check if jQueryui library has been loaded

    }

}

edited Oct 24 '17 at 05:52

answered Oct 24 '17 at 05:47

Jereme

621
6
14

Thanks for the reply let me check – Khushhal Oct 24 '17 at 05:49
Update: should be changed to != 'undefined' since jQuery.ui is an object – Jereme Oct 24 '17 at 05:53
I'm testing it here. you can use the console http://jsbin.com/nigegoseya/edit?html,console,output – Jereme Oct 24 '17 at 05:55
I tried this but I am getting error "indexui.js:32 Uncaught ReferenceError: jQuery is not defined" In line " if (typeof jQuery.ui != "undefined"){ //check if jQueryui library has been loaded – Khushhal Oct 24 '17 at 06:08

load two jQuery if not loaded

2 Answers2