Loading another script from a Javascript file but I can't access functions in the loaded script

Question

I've been trying to load a file using the following code, in a file I've called InterpolatorTest.js:

include("scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/Interpolator.js");

var interpolator = new OneDimensionalInterpolatorTemplate();

This is the include code, which is loaded in the header of every page:

function include(scriptName) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = scriptName;
    document.getElementsByTagName("head")[0].appendChild(script);
}

And this is the script I'm trying to include, Interpolator.js:

OneDimensionalInterpolatorTemplate = function() {

}

However, when I try to load the script, I get the following error:

Uncaught ReferenceError: OneDimensionalInterpolatorTemplate is not defined --- InterpolatorTest.js:3

It doesn't seem to be able to access the methods in the loaded script, but it doesn't give me a 404 error so I assume it's loading the script successfully. I've used this include script before with success.

This is the actual code for the page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Page Title</title>
        <script type="text/javascript" src="scripts/EssentialUtilities.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/InterpolatorTest.js"></script>
    </body>
</html>

I've been working on this for hours and I'm totally stumped. Anyone know what's wrong?

Edit: Thanks to the answer from Alberto Zaccagni, I got it working by installing jQuery and using this code snippet. The issue seems to be that Javascript loads files asynchronously, so I was attempting to call the method before it was loaded. AJAX has a synchronous loading method, so that eliminated the problem. :)

Just to let you know - requirejs.org is excellent for dependency management. Makes this kind of issue go away completely. — JJJCoder
– JJJCoder, Commented Sep 2, 2014 at 12:39
@HockeyJ Thanks. I've solved the issue using AJAX from this answer but I'll explore that solution once I have time. I'm migrating from being a Java dev and I like to keep things structured the same way, so that looks like a very helpful library. — JCC
– JCC, Commented Sep 2, 2014 at 12:43

Community · Accepted Answer · 2017-05-23 12:18:31Z

1

I think that what you're missing is the onload bit, have a look at this question: How do I include a JavaScript file in another JavaScript file?

I include the relevant snippet as reference:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Sep 2, 2014 at 12:21

Alberto Zaccagni

31.8k11 gold badges75 silver badges108 bronze badges

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

3 Comments

JCC Over a year ago

I've got it working! I didn't want to re-engineer my code to use callbacks, so I installed jQuery and used the asynchronous AJAX method referenced in the answer you linked. This answer had all the code I needed. Thanks :)

Alberto Zaccagni Over a year ago

You're welcome ^^, don't forget to upvote this and probably also the linked one.

JCC Over a year ago

I tried, but I need 15 reputation before I can upvote. I've made an edit so other people can see the solution as best I can, I hope you guys accept virtual love in the meantime. ;)

Collectives™ on Stack Overflow

Loading another script from a Javascript file but I can't access functions in the loaded script

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related