I'd like to load an external JavaScript file, using jQuery, asynchronously, and then be able to call functions loaded from the external JavaScript. I'm including my JS file at the bottom of my html, just before </html>. The jQuery code is just before my code.

I'm trying this:

(function(){

    $(document).ready(function() {
        obj.init();
    });

    var obj = {

        init:function(){

            $.ajax({
                url: '.js',
                dataType: 'script',
                success: function() {
                    obj.dostuff();
                }
            });

        },
        dostuff:function() {
            // ...do stuff
        }

    }
    window.obj = obj;

})();

The Chrome JavaScript console is reporting this:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

I'm trying to keep all my JS in one file, all in objects (classes & functions style), and then call each class (an init() function) from within the $(document).ready();.

What am I doing wrong here..?

I'd like to load an external JavaScript file, using jQuery, asynchronously, and then be able to call functions loaded from the external JavaScript. I'm including my JS file at the bottom of my html, just before </html>. The jQuery code is just before my code.

I'm trying this:

(function(){

    $(document).ready(function() {
        obj.init();
    });

    var obj = {

        init:function(){

            $.ajax({
                url: 'http://domain./script.js',
                dataType: 'script',
                success: function() {
                    obj.dostuff();
                }
            });

        },
        dostuff:function() {
            // ...do stuff
        }

    }
    window.obj = obj;

})();

The Chrome JavaScript console is reporting this:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

I'm trying to keep all my JS in one file, all in objects (classes & functions style), and then call each class (an init() function) from within the $(document).ready();.

What am I doing wrong here..?

• javascript
• jquery
• asynchronous

• 1 You can check this: api.jquery./jquery.getscript and this: stackoverflow./questions/24297829/… – vaso123 Commented Dec 17, 2014 at 11:31
• Thanks @lolka_bolka, I certainly can, and already have... $.getScript() is just shorthand for my $.ajax() call (so replacing $.ajax() with $.getScript() does not make my code example work), and that other stack question doesn't involve jQuery. My question relates to asynchronous JavaScript in the way my code shows. Do you know how to get $.ajax() to use a jQuery DOM insert rather than a document.write..? Like I said, I want to use jQuery to include external asynchronous JavaScript in the way my code shows. – Stephen Last Commented Dec 17, 2014 at 13:16

1 Answer 1

You can load the script by using the following

var scriptElement = document.createElement('script');
scriptElement.src = "http://code.jquery./jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(scriptElement);

Then you can start using jQuery or whatever library you have loaded.

Or something similar

function loadMyScript() {
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "http://code.jquery./jquery-latest.min.js";
  document.body.appendChild(script);
}

window.onload = loadMyScript;

UPDATE:

(function(app, $, undefined) {

  //public
  app.init = function() {

    var url = "//code.jquery./color/jquery.color.js";
    $.getScript(url, function() {
      doStuff();
    });
  };

  //private
  var doStuff = function() {

    $(".block")
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000)
      .delay(500)
      .animate({
        backgroundColor: "olive"
      }, 1000)
      .delay(500)
      .animate({
        backgroundColor: "#00f"
      }, 1000);
  };

}(window.app = window.app || {}, jQuery));
window.onload = app.init;

Here's the JsBin: http://jsbin./lumapubozu/1/edit?html,js,output

GOOGLE MAPS UPDATE

You just say in the link 'callback=app.loadMap' what it your callback.

(function(app) {

      app.loadMap = function() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      };

      app.loadGoogleMapsScript = function () {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis./maps/api/js?v=3.exp&' +
          'callback=app.loadMap';
        document.body.appendChild(script);
      };

    }(window.app = window.app || {}));

    window.onload = app.loadGoogleMapsScript;

JsBin: http://jsbin./wigoxarayu/1/edit?js,output