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?

When you view the html is the ui script tag in the head? What happens when you test if (jQuery.fn.ajaxForm) ? — czarchaic
– czarchaic, Commented Dec 27, 2009 at 18:23
That line you mentioned works, I mean, expression is true. I need all the extensions are loaded before my script. I could get a solution for IE but it doesn't work in Chrome and Firefox, which is test those conditions for certain period until it becomes true or returns by timeout. — Max Rios
– Max Rios, Commented Dec 29, 2009 at 11:39

elo80ka · Accepted Answer · 2010-07-25 19:54:45Z

7

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

edited Jul 25, 2010 at 19:54

answered Jul 25, 2010 at 19:46

elo80ka

16.2k3 gold badges39 silver badges43 bronze badges

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

1 Comment

SammyK Over a year ago

When I first implemented this I was getting an appendChild error when trying to add a js file. But css would work fine. The reason is because I was including this in the head tag before the body was available in the DOM. So you need to wrap a $(document).ready(); around it to get it to work.

flattin_machine · Accepted Answer · 2009-12-27 21:46:31Z

3

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"?

answered Dec 27, 2009 at 21:46

flattin_machine

512 bronze badges

2 Comments

Max Rios Over a year ago

I appreciate your comment but I need to do it in the other way.

flattin_machine Over a year ago

Then have you tried to make your 'load' function without any timeouts? That should help (I've done so and it worked). If it won't, you may also try to move the inclusion of your 'myScript.js' from the head to the body of the document.

Collectives™ on Stack Overflow

Dynamically loading jQuery and extensions

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related