files not loading correctly

Question

Good afternoon everyone! I have searched the web to resolve this problem and tried to implement what I could see as the solution, but I still occasionally run into problems...

The project is modular in design with each module having a .html, .js, and .css file. When loading a module, those associated files are checked for and if they already exist in the DOM (eg the module has been opened at least once already), then there are no problems. If the files aren't already loaded (eg the module hasn't been loaded yet), then occasionally I run into a problem where a javascript function is called, but the external .js file hasn't been loaded yet. Here's the below function responsible for handling this:

function loadFile(sType,sURI,sCallback) {
// sType    the type of file to load: link, script
// sURI the URI of the file to load
// sCallback    the code to execute after successfully loading the file
var ref = document.createElement(sType);

if (sType == 'script') {
   ref.setAttribute("type","text/javascript");
   ref.setAttribute("src",sURI);
} else  if (sType == 'link') {
   ref.setAttribute("rel","stylesheet");
   ref.setAttribute("type","text/css");
   ref.setAttribute("href",sURI);
}

ref.async = true;
ref.onreadystatechange = ref.onload = function() {
   var state = ref.readyState;
   if (! sCallback.done && (! state || /loaded|complete/.test(state))) {
    sCallback.done = true;

    if (typeof(sCallback) === 'function') {
       callback();
    } else {
       eval(sCallback);
    }
  }
};

document.getElementsByTagName('head')[0].appendChild(ref);
}

There are several other SO articles that were used for the above function:

Dynamically load external javascript file, and wait for it to load - without using JQuery

Javascript check if function exists

So the above function will be called like:

loadFile('link',"module.css?cache=0", $("#divModule").hide().load("module.php?action=init").fadeIn('slow'));
loadFile('script',"module.js?cache=0", "initModule('req')");

The first call will load the .html file contents (via the module.php call) for the module after the .css file has downloaded. The second call will call the modules js init function after the .js file has downloaded.

It doesn't appear to have any issues with the .css file, but sometimes the module will not load correctly meaning that the layout is rendered correctly, but no values populate (which is what happens with the modules js init function). If I check the 'Web console' in FF, there aren't any errors that are thrown. Any thoughts?

Thanks, Dave

Answer 1

Hard to say for me w/o seeing what's happening in that module.php code, but it looks to me like your first one at least is firing immediately, rather than as a callback. Unless I'm missing something, the callback should be a function, while right now you're actually executing the jquery hide/load stuff right when you call loadfile . You might want to wrap it in a function.