Load external js file with jQuery

Question

Looked for it everywhere, and found the answer but lost. anyone knows how to load an external .js file from another js file?

main_lobj1.onreadystatechange = function(){     
  if (main_lobj1.readyState == 4) {if (main_lobj1.status == 200) { 
    document.getElementById("middleDiv_m").innerHTML=main_lobj1.responseText;  
  jQuery.getScript('jquery/tabs.js')        
  }
}

innerHTML works and responce text is pasted. The problem is that JS is not working in that document. jQuery.getScript should be loading that external js file, but it doesnt

Answer 1

Exactly for this reason a function $.getScript() exist in jquery. You can use it simply in this way:

$.getScript("test.js", function( data, textStatus, jqxhr ) {
  // this is your callback.
});

Answer 2

This is the way you can do it to load an external js file to Jquery

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

Answer 3

If you call an external script you want to base your script on you may want to take note that ajax-based jquery script are asynchronous by defealt.

Calling an external script asynchronousily will cause the rest of the rest being executed before the external script is loaded.

Today I ran into the same problem which was easily being solved by making a small adition to Sam Arul Raj's post:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script",
  async: false
});