Chaining dynamically loaded javascript

Question

I have a static page that I'm trying to add jQuery and the BlockUI plugin to. jQuery needs to be loaded first before I can use BlockUI, and while I can load jQuery just fine, I cant seem to get BlockUI to load after and call its loaded handler so I can do the work. I do see the BlockUI script tag in my html page, so it is at least being injected in okay as far as I can see. Here's my code:

var jqueryScript = document.createElement( "script" );
jqueryScript.src = "/glptools/scripts/jquery-1.9.1.min.js";
if ( jqueryScript.addEventListener ) {
    jqueryScript.addEventListener( "load", jqueryReady, false );
}
else if ( jqueryScript.readyState ) {
    jqueryScript.onreadystatechange = jqueryReady;
}
document.getElementsByTagName( 'head' )[0].appendChild( jqueryScript );

function jqueryReady() {
    if ( typeof jQuery != 'undefined' ) {
        $( document ).ready( function () {
            //Initialize Tabber
            tabberAutomatic( "" );

            // Add BlockUI plugin
            var blockUIScript = document.createElement( "script" );
            blockUIScript.src = "/glptools/scripts/blockui/jquery.blockUI.js";
            if ( blockUIScript.addEventListener ) {
                blockUIScript.addEventListener( "load", blockUIReady, false );
            }
            else if ( blockUIScript.readyState ) {
                blockUIScript.onreadystatechange = blockUIReady;
            }
            document.getElementsByTagName( 'head' )[0].appendChild( blockUIScript );
        } );
    }
}

function blockUIReady() {
    $( "#tabbertabhide" ).each( function ( index, elem ) {
        $( elem ).block();
    } );
}

My goal is to use BlockUI to block the tabs located on my page. I tried putting the block ui load code outside the ready() call, but then the loaded handler gets called before jQuery has been loaded.

@RocketHazmat I can't edit this file :(. It's one of 1000's that need to have this added and they are static files just hanging out on disk. And for business reasons I can't modify them. — Nicros
– Nicros, Commented May 8, 2013 at 15:51
@Nicros: So, what's the issue here? Is blockUIReady not being called? Is $(elem).block(); not working? P.S. $("#tabbertabhide").each is unnecessary, since $("#tabbertabhide") will return one element. — gen_Eric
– gen_Eric, Commented May 8, 2013 at 15:55

MDerks · Accepted Answer · 2013-05-08 16:01:28Z

2

You should consider use of script loader such as http://requirejs.org/ or http://headjs.com/ which can resolve dependecies tree for you and make code cleaner.

answered May 8, 2013 at 16:01

MDerks

1235 bronze badges

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

2 Comments

Nicros Over a year ago

This is an interesting idea, except that I still need to dynamically load the script loader itself- and then load up the other scripts. Not the end of the world, but I think I like Vivin's solution the best

Nicros Over a year ago

Just for posterity, I did end up using head.js- I just needed to load the script via the method in my post and then used head.js to load the others.

Vivin Paliath · Accepted Answer · 2013-05-08 17:16:22Z

1

If BlockUI depends on jQuery, you will need to load it sequentially. You can do something like this:

//This function creates a script element using "resource" and
//adds it to the head. callback is used as the onload callback
//for the script
function loadScript(resource, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");

    script.type = "text/javascript";
    script.src = resource + "?t=" + new Date().getTime(); //prevent caching

    if (callback) {
        script.onload = callback;
    }

    head.appendChild(script);
}

//Array of scripts to load
var resources = [
        "/glptools/scripts/jquery-1.9.1.min.js",
        "/glptools/scripts/blockui/jquery.blockUI.js"
];

//This function will load the scripts one after the other, using a callback
//that calls this function itself.
function load(i) {
    if(i < resources.length) {
        loadResource(resources[i], function() {                
            load(++i);
        });
    } else {
        //Everything has finished loading so you can start
        //using jQuery and BlockUI
    }
}

load(0);

edited May 8, 2013 at 17:16

answered May 8, 2013 at 15:53

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

6 Comments

Nicros Over a year ago

One note- this is not browser independent as far as I can tell... might need some tweaks.

Vivin Paliath Over a year ago

@Nicros, the only problematic part might be the script.onload, but everything else is pretty standard.

Nicros Over a year ago

Yep, I added changed the onload to this:

if ( script.addEventListener ) {         script.addEventListener( "load", callback, false );     }     else if ( script.readyState ) {         script.onreadystatechange = callback;     }

and that works for everything as far as I can tell.

Nicros Over a year ago

Although there are some issues with IE showing the block stuff properly it seems... but I'll post that in a new question...

Nicros Over a year ago

Actually this doesn't work correctly in IE at all :( The 'finished loading' stuff gets called twice in IE, where it only appears to get called once in chrome... I'm still debugging it, but in IE it calls the ready section to load blockUI before jQuery is loaded.

|

Vadim · Accepted Answer · 2013-05-08 16:12:43Z

As far as both jQuery and BlockUI are located in the same origin as your page you can get jQuery and BlockUI scripts as text, concat them and add to document as merged script. Just like this:

function createXMLHttp() {
  //Initializing our object
  var xmlHttp = null;
  //if XMLHttpRequest is available then creating and returning it
  if (typeof(XMLHttpRequest) != undefined) {
    xmlHttp = new XMLHttpRequest;
    return xmlHttp;
  //if window.ActiveXObject is available than the user is using IE...so we have to create the newest version XMLHttp object
  } else if (window.ActiveXObject) {
    var ieXMLHttpVersions = ['MSXML2.XMLHttp.5.0', 'MSXML2.XMLHttp.4.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp', 'Microsoft.XMLHttp'];
    //In this array we are starting from the first element (newest version) and trying to create it. If there is an
    //exception thrown we are handling it (and doing nothing)
    for (var i = 0; i < ieXMLHttpVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(ieXMLHttpVersions[i]);
            return xmlHttp;
        } catch (e) {
        }
    }
  }
}

function getData(url, callback) {
  var xmlHttp = createXMLHttp();
  xmlHttp.open('get', url, true);
  xmlHttp.send(null);
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4) {
      if (xmlHttp.status === 200) {
        callback(xmlHttp.responseText);
      }
    }
  };
}

getData('/glptools/scripts/jquery-1.9.1.min.js', function(jQuery) {
  getData('/glptools/scripts/blockui/jquery.blockUI.js', function(blockUi) {
    var head = document.getElementsByTagName("head")[0],
        script = document.createElement('script');
    script.innerHTML = jQuery + ';' + blockUi;
    head.appendChild(script);
  });
});

I think ActiveXObject is IE specific, right? I thought about this approach though as well, but was hoping there was a cleaner way.

Collectives™ on Stack Overflow

Chaining dynamically loaded javascript

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related