Dynamically loading jQuery and extensions

Question

Hi everybody, I'm trying to encapsulate a javascript that I built using jQuery, jQuery UI, jQuery Form and xmlDom. I want to be able to send to my client just one javascript that references the other ones, including just a small piece of js for options settings. Find below an example:

<script language="javascript">
var myOptions = {
   shop: 1,
   style: "gold"
}
load();
</script>
<script src="http://myServer/myScript.js" type="text/javascript"></script>

It's been nearly impossible to me to load jQuery and plugins dinamically. I read a lot of examples, jQuery works fine when I load it dinamically, but the rest of the extensions never worked properly. Following sequence is the unique one that loaded at least a couple of plugins:

Set a load function that loads jQuery dinamically:

load = function() {
    load.getScript(url_base + "/js/jquery-1.3.2.js");
    load.tryReady(0); 
}
load.getScript = function(filename) {
  var script = document.createElement('script')
  script.setAttribute("type","text/javascript")
  script.setAttribute("src", filename)
  if (typeof script!="undefined")
  document.getElementsByTagName("head")[0].appendChild(script)
}
load.tryReady = function(time_elapsed) {
  // Continually polls to see if jQuery is loaded.
  if (typeof $ == "undefined") { // if jQuery isn't loaded yet...
    if (time_elapsed <= 5000) { // and we havn't given up trying...
      setTimeout("load.tryReady(" + (time_elapsed + 200) + ")", 200); // set a timer to check again in 200 ms.
    } else {
      alert("Timed out while loading jQuery.")
    }
  } else {
    ...
  }

Load every plugin after that, jQueryForm, jQuery UI, xmlDom

When I check for jQuery form it's available:

if (jQuery().ajaxForm)

When I check for xmlDom it works

When I check for jQuery UI it's never available.

if(jQuery().ui)

It doesn't matter if I set a timeout to wait for UI, it's never loaded. Seems to be jQuery executes my UI features before it's loaded.

Can anybody send me at least a link for that? I don't have enough skills yet for this kind of issues.

Thanks in advance.

Answer 1

As Zen of Python says, "Simple is better than complex". Is all this mess with timeouts worth something? As I assume, the browswer will HAVE to load all js-libraries in any way (to execute your "myScript.js" file), so isn't it easier just to include them "normally"?

Answer 2

Perhaps, this might help. From the dive.into.javascript site:

SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they're needed.

Minified with the Google Closure Compiler, it weighs in at 1.12KB (625 bytes when GZipped).

If you absolutely cannot include another javascript library, you can take a look at the code (there isn't much of it, really); with the ideas in there, you should be able to fix your script.

EDIT
If you use the Google Closure Compiler to minify the script, you'll need to add back the node.sheet.cssRules line. It appears to be used in Gecko and Webkit browsers, to test if a lazy-loaded stylesheet has been completely downloaded (of course, if you won't be lazy-loading stylesheets, you can remove that section completely).