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 — Yogi
– Yogi, Commented Jan 26, 2016 at 8:54

elTomato · Accepted Answer · 2016-01-26 08:58:40Z

1

I'd use

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

Documentation jQuery.getScript()

answered Jan 26, 2016 at 8:58

elTomato

3333 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:15:16Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 26, 2016 at 8:53

code

2,1632 gold badges25 silver badges50 bronze badges

2 Comments

elTomato Over a year ago

But you're changing the logic!

Yogi Over a year ago

Yet, how will OP know when the script has finished loading? That seems to be the cause of the error.

Julian Hollmann · Accepted Answer · 2016-01-26 09:00:06Z

1

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);
});

answered Jan 26, 2016 at 9:00

Julian Hollmann

2,9122 gold badges28 silver badges44 bronze badges

Comments

Vlad Churakov · Accepted Answer · 2016-01-26 09:00:12Z

1

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' );
} );

answered Jan 26, 2016 at 9:00

Vlad Churakov

3482 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

2 Comments

Solution: Pass a callback to $.getScript

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Solution: Pass a callback to $.getScript

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related