Jquery Widget - where to put code for 2nd link to remote javascript...

Jquery Widget - where to put code for 2nd link to remote javascript...

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 and where to add this link to jquery-ui.js 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.  The code before is working for me, just need to figure out how to include that last link in the code... Thanks for any help offered.

  
    
   
  1. (function() {
    2. 
   
  2.  // Localize jQuery variable
    3. 
   
  3.  var jQuery;
    4. 
   
  4.  /******** Load jQuery if not present *********/
    5. 
   
  5.  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
    6. 
   
  6.  var script_tag = document.createElement('script');
    7. 
   
  7.  script_tag.setAttribute("type", "text/javascript");
    8. 
   
  8.  script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
    9. 
   
  9.  if (script_tag.readyState) {
    10. 
   
  10.  script_tag.onreadystatechange = function() { // For old versions of IE
    11. 
   
  11.  if (this.readyState == 'complete' || this.readyState == 'loaded') {
    12. 
   
  12.  scriptLoadHandler();
    13. 
   
  13.  }
    14. 
   
  14.  };
    15. 
   
  15.  } else {
    16. 
   
  16.  script_tag.onload = scriptLoadHandler;
    17. 
   
  17.  }
    18. 
   
  18.  // Try to find the head, otherwise default to the documentElement
    19. 
   
  19.  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    20. 
   
  20.  } else {
    21. 
   
  21.  // The jQuery version on the window is the one we want to use
    22. 
   
  22.  jQuery = window.jQuery;
    23. 
   
  23.  main();
    24. 
   
  24.  }
    25. 
   
  25.  /******** Called once jQuery has loaded ******/
    26. 
   
  26.  function scriptLoadHandler() {
    27. 
   
  27.  // Restore $ and window.jQuery to their previous values and store the
    28. 
   
  28.  // new jQuery in our local jQuery variable
    29. 
   
  29.  jQuery = window.jQuery.noConflict(true);
    30. 
   
  30.  // Call our main function
    31. 
   
  31.  main();
    32. 
   
  32.  }
    33. 
   
  33.  /******** Our main function ********/
    34. 
   
  34.  function main() {
    35. 
   
  35.  jQuery(document).ready(function($) {
    36. 
   
  36.  /******* Load CSS *******/
    37. 
   
  37.  var css_link = $("<link>", {
    38. 
   
  38.  rel: "stylesheet",
    39. 
   
  39.  type: "text/css",
    40. 
   
  40.  href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    41. 
   
  41.  });
    42. 
   
  42.  css_link.appendTo('head');
    43. 
   
  43.  /******* Load HTML *******/
    44. 
   
  44.  var jsonURL = "//www.myurl.com/mssql.php/ws_nfy";
    45. 
   
  45.  jQuery(document).ready(function() {
    46. 
   
  46.  jQuery.ajax({
    47. 
   
  47.  url: jsonURL,
    48. 
   
  48.  success: searchCallback
    49. 
   
  49.  });
    50. 
   
  50.  });
    51. 
   
  51.  function searchCallback(data) {
    52. 
   
  52.  var ws_nfy = data.ws_nfy.records;
    53. 
   
  53.  jQuery.each(ws_nfy, function(index, nfy) {
    54. 
   
  54.  jQuery("#tabs ul").append('<li><a href="#tabs-' + nfy[0] + '">' + nfy[2] + '</a></li>');
    55. 
   
  55.  jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
    56. 
   
  56.  });
    57. 
   
  57.  $("#tabs").tabs();
    58. 
   
  58.  };
    59. 
   
  59.  });
    60. 
   
  60.  }
    61. 
   
  61. })(); // We call our anonymous function immediately
    62.