1

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. :)

Community
  • 1
  • 1
JCC
  • 492
  • 3
  • 17
  • Just to let you know - http://requirejs.org/ is excellent for dependency management. Makes this kind of issue go away completely. – JsAndDotNet Sep 02 '14 at 12:39
  • 1
    @HockeyJ Thanks. I've solved the issue using AJAX from [this answer](http://stackoverflow.com/a/7352694/3255378) 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 Sep 02 '14 at 12:43

1 Answers1

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);
}
Community
  • 1
  • 1
Alberto Zaccagni
  • 30,779
  • 11
  • 72
  • 106
  • 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](http://stackoverflow.com/a/7352694/3255378) had all the code I needed. Thanks :) – JCC Sep 02 '14 at 12:39
  • You're welcome ^^, don't forget to upvote this and probably also the linked one. – Alberto Zaccagni Sep 02 '14 at 12:41
  • 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. ;) – JCC Sep 02 '14 at 12:48