Dynamically load JS inside JS [duplicate]

Answer 1

The jQuery.getScript() method is a shorthand of the Ajax function (with the dataType attribute: $.ajax({ url: url,dataType: "script"}))

If you want the scripts to be cachable, either use RequireJS or follow jQuery's example on extending the jQuery.getScript method similar to the following.

jQuery.cachedScript = function( url, options ) {

  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });

  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};

// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

Reference: jQuery.getScript() | jQuery API Documentation

Answer 2

I'm recommend using requirejs with AMD javascript class files

good example of how to use it here

http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Answer 3

If you have many files with dependencies, use AMD/RequireJS. http://requirejs.org/

Answer 4

You may dynamically load the js inside the page not another js file

you have to use the getScript to load the js file

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});

Answer 5

jQuery has $.getScript():

Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.

Answer 6

My guess is that in your DOM-only solution you did something like:

var script = document.createElement('script');
script.src = something;
//do stuff with the script

First of all, that won't work because the script is not added to the document tree, so it won't be loaded. Furthermore, even when you do, execution of javascript continues while the other script is loading, so its content will not be available to you until that script is fully loaded.

You can listen to the script's load event, and do things with the results as you would. So:

var script = document.createElement('script');
script.onload = function () {
    //do stuff with the script
};
script.src = something;

document.head.appendChild(script); //or something of the likes