How to load a .js file only when needed in an external js.file

Question

My goal is to load a PlaceOne.js file only when needed.

My current code in the index.js is

if (placeID === "placeone") {
  return new PlaceOne(id, PlaceInitialData);
}

And the PlaceOne.js is simply implemented into my index.html at the end of the body. Everything works fine.

But as soon as I remove the PlaceOne.js file from the Index I get the Errormessage that PlaceOne is not defined. So now I want to load it when my placeID is "placeone" After some research I found the solution of getScript. So I tried the following:

if (placeID === "placeone") {
  $.getScript( "js/PlaceOne.js" )
  return new PlaceOne(id, PlaceInitialData);
}

But I still get the Errormessage that PlaceOne is not defined I also would like to check if the file is already loaded or currently loading to avoid a multiple loading of the file.

You probably want to add a callback to your getScript. See this question for examples: [jquery .getscript() callback when script is fully loaded and executed](http://stackoverflow.com/questions/14565365/jquery-getscript-callback-when-script-is-fully-loaded-and-executed) — Yogi, Jan 26 '16 at 08:54
http://stackoverflow.com/questions/8278492/javascript-function-to-load-external-js-files-is-needed — code, Jan 26 '16 at 09:01

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

For reference, see this question: Stack Overflow

edited May 23 '17 at 12:15

Community

1
1

answered Jan 26 '16 at 08:53

code

2,115
1
22
46

But you're changing the logic! – elTomato Jan 26 '16 at 08:57
1

Yet, how will OP know when the script has finished loading? That seems to be the cause of the error. – Yogi Jan 26 '16 at 08:57

score 1 · Answer 2 · answered Jan 26 '16 at 08:58

1

I'd use

if (placeID === "placeone") {
    $.getScript( "js/PlaceOne.js" , myCallBackForNewPlaceOne());
}

Documentation jQuery.getScript()

answered Jan 26 '16 at 08:58

elTomato

333
3
11

score 1 · Answer 3 · answered Jan 26 '16 at 09:00

The problem with your code is, that loading a Script is an asynchronous operation. This means that you execute new PlaceOne(…) before the Script has finished loading.

Solution: Pass a callback to $.getScript

When you look at the documentation of $.getScript you will see that you can pass a callback to $.getScript

Your code should look like this:

$.getScript( "js/PlaceOne.js", function() {
  new PlaceOne(id, PlaceInitialData);
});

score 1 · Answer 4 · answered Jan 26 '16 at 09:00

You got the error message because js/PlaceOne.js hadn't been loaded yet. It's asynchronous operation and there is no guaranty when it will be loaded.

You should use "Success" callback to know that script is successfully loaded:

$.getScript( "js/PlaceOne.js", function( data, textStatus, jqxhr ) {
   console.log( 'In most cases, here we have PlaceOne' );
} );

How to load a .js file only when needed in an external js.file

4 Answers4

Solution: Pass a callback to $.getScript