如何在JqueryWidget代码中向脚本添加第二个链接

Question

I have written a widget and it works great, but right now I am giving my users a link to a remote script, a link to my script and a div to place on their page. I would like to reduce this to just a link to my script and the div. The remote link I want to include in my code below is

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Can anyone please educate me on how to add a second link in my code? I already link to a remote jquery and a remote stylesheet, but I am not sure how/where to include another remote link. I have tried a number of places and ways, but I keep breaking my page, haha. Thanks for any help offered.

(function() {
    // Localize jQuery variable
    var jQuery;
    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function() { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }
    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
            // 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
            main();
        }
        /******** Our main function ********/
    function main() {
        jQuery(document).ready(function($) {
            /******* Load CSS *******/
            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
            });
            css_link.appendTo('head');
            /******* Load HTML *******/
            var jsonURL = "//www.myurl.com/mssql.php/ws_nfy";
            jQuery(document).ready(function() {
                jQuery.ajax({
                    url: jsonURL,
                    success: searchCallback
                });
            });
            function searchCallback(data) {
                var ws_nfy = data.ws_nfy.records;
                jQuery.each(ws_nfy, function(index, nfy) {
                    jQuery("#tabs ul").append('<li><a href="#tabs-' + nfy[0] + '">' + nfy[2] + '</a></li>');
                    jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
                });
                $("#tabs").tabs();
            };
        });
    }
})(); // We call our anonymous function immediately

Answer 1

You're checking if jQuery is already loaded before injecting it... Which is good. Now you should do the same for jQuery-UI.

So that's the same procedure...

Try this:

(function() {
  // Localize jQuery variable
  var jQuery;
  /******** Load jQuery if not present *********/
  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function() { 
        // For old versions of IE
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
        }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
  } else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    //main();                   // Not now! Check for UI first.
    checkUI();
  }
  /******** Called once jQuery has loaded ******/
  function scriptLoadHandler() {
    // 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
    //main();               // Not now! Check for UI first.
    checkUI();
  }

        // ========================== Check if jQuery-UI is already loaded    
  function checkUI(){
    if(typeof(jQuery.ui) != "undefined"){
      // UI is loaded already.
      console.log("UI is defined");
      console.log( typeof(jQuery.ui) );
      main();

    }else{
      // UI is not loaded. Got to load it.
      console.log("UI is NOT defined");
      //console.log( typeof(jQuery.ui) );

      var ui = document.createElement('script');
      ui.setAttribute("type", "text/javascript");

      // For UI
      window.$ = jQuery;

      ui.setAttribute("src", "https://code.jquery.com/ui/1.12.1/jquery-ui.js");
      console.log(ui);



      document.getElementsByTagName("head")[0].appendChild(ui);

      if (ui.readyState) {
        console.log( "READYSTATE" );
        ui.onreadystatechange = function() { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
            console.log( "STATELOADED" );
            main();
          }
        };
      } else {
        console.log( "ELSE" );
        jQuery(ui).on("load", function(){
          console.log("UI loaded...");
          main();
        });
      }
    }
  }



  /******** Our main function ********/
  function main() {

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

      console.log("jQuery: "+jQuery.fn.jquery+"\njQuery-UI: "+jQuery.ui);
      console.log("Tabs element: "+jQuery("#tabs").length);
      /******* Load CSS *******/
      var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
      });
      css_link.appendTo('head');
      /******* Load HTML *******/
      var jsonURL = "//www.myurl.com/api.php/ws_nfy";
      jQuery.ajax({
        url: jsonURL,
        success: searchCallback
      });
      function searchCallback(data) {
        var ws_nfy = data.ws_nfy.records;
        jQuery.each(ws_nfy, function(index, nfy) {
          jQuery("#tabs ul").append('<li><a href="#tabs-' + nfy[0] + '">' + nfy[2] + '</a></li>');
          jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
        });
        jQuery("#tabs").tabs();
      };
    });
  }
})(); // We call our anonymous function immediately