Question

I believe the issue below relates to variable scope, although I may be mistaken.

I’ve created a javascript bookmarklet that inserts a few external javascript files into the web page. For this bookmarklet, I need to insert 3 external js files. To insert these files, I’m using about 6 different functions, all that are very similar. I tried to create a new function to consolidate these functions, but it keeps failing. I believe it fails because of a variable scope issue, but I may be mistaken.

Here is the code that works to insert one (of 3) external js files:

jQueryCheck();
function jQueryLoader() {
    var jQ = document.createElement('script');
    jQ.type = 'text/javascript';
    jQ.onload = jQueryCheck;
    jQ.src = 'http://example.com/jquery.js';    
    document.body.appendChild(jQ); //the jQuery variable get defined here

}

function jQueryCheck() {
    if (typeof jQuery == 'undefined') {
        jQueryLoader();
    } else {
        tableSorterLoader();
    }
}

The above code works, but I have to run nearly identical functions 3 times in order to insert 3 separate external files. I tried to consolidate the code into the following (which fails):

var scripts = [];
    scripts[0] = 'http://example.com/jquery.js';
    scripts[1] = 'http://example.com/plugin2.js';
    scripts[2] = 'http://example.com/plugin3.js';
jsLoader(scripts, mainFunction);
function jsLoader(file,nextFunction) {//nextFunction is the function that runs after jsLoader is finished
    for (var i = 0; i <= scripts.length; i++) {
        function insertScript() {
            var js = document.createElement('script');
            js.type = 'text/javascript';
            js.onload = scriptCheck;
            js.src = file[i];   
            document.body.appendChild(js);//the jQuery variable fails to get defined here
        }
        function scriptCheck() {
            var variableTest = (typeof jQuery);
            if (typeof jQuery == 'undefined') {
                insertScript();
            }
        }
        scriptCheck();
    }
    nextFunction();
}

I believe I isolated where the problem occurs: after document.body.appendChild(js); (see the comments). In the first set of functions, the jQuery variable is successfully defined at this line of code (because the jQuery library is inserted). However, in the second function, the jQuery variable is not getting defined even though the jQuery library still is being successfully inserted into the web page’s html. It is necessary to validate whether jQuery has been defined so that the remainder of the code does not execute until jQuery is active and available.

Can anyone suggest some causes to this problem as well as the solutions? Additionally, can anyone suggest improvements to my new function jsLoader() to make it more intelligent/professional?

Answer 1

It looks like you need the jquery file loaded before the plugins will work, so I would not try to load all three at once (like the second code is trying), but to approach it probably like what the initial 3 function calls did (maybe).

As the comments suggest, I would not use a loop (unless you have many plugin files), but rather use an un-nested loading function like jsLoader. The first call loads jQuery with nextFunction calling jsLoader for the first plugin file with it’s nextFunction calling the last file. Then you know when you files are all loaded.