Dynamically loading jQuery and extensions

Question

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 dynamically. I read a lot of examples, jQuery works fine when I load it dynamically, 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 dynamically:

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 a link to help with this?

Answer 1

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