CODEWITHSUNDEEP
javascriptjquery
user1155986
user1155986

Reputation: 121

Dynamically Loading JQuery form an externally linked to JavaScript file

  1. I have one short script that client's add to their website to load the application that we offer
  2. This code asynchronously loads the JavaScript that launches the application, onto the client's page (a pop up)
  3. The code to launch the application (launch code :-) requires jQuery
  4. Some client's use jQuery on their site all ready... some don't...
  5. What I really really want to achieve is, the code that gets loaded onto the page checks the document for the presence of JQuery, and if it isn't already there, loads it onto the page, so the launch code can make use of it

Now I have spent a while getting this JavaScript together and I have got to the stage that jQuery is getting added to the page when needed but any subsequent script can't seem to use it unless I have added an alert!! like alert('Hello World');

My thought is that the alert function manages to get the DOM to 'reload' in some way which updates the jQuery link in the DOM... my understanding definitely falls down at this point...

Any help will be much appreciated, thanks in advance

Here is what I have, the following is the part of the 'launch code' that appends jQuery onto the client's page, this is externally linked to by the loading script mentioned in point 1.

if (typeof jQuery == 'undefined') {
  //alert('No jQuery! Will attempt to load it now');
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(script);
  tryReady = function(time_elapsed) {
    if (typeof jQuery == "undefined") { // if jQuery isn't loaded yet...
      if (time_elapsed <= 100000) { // and we havn't given up trying...
        setTimeout("tryReady(" + (time_elapsed + 200) + ")", 200); // set a timer to check again in 200 ms.
      } else {
        alert('hello'); // If this isn't here, the subsequent scripts fail to access jQuery
      }
    } else {
      //alert ("jQuery wasn't but now is loaded")
    }
  }
  tryReady();
}      
  // Functions making use of jQuery go here...

Upvotes: 0

Views: 396

Answers (2)

Juicy Scripter
Juicy Scripter

Reputation: 25928

Consider using onload attribute of script tag.

if (typeof jQuery == 'undefined') {
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
  script.onload = function(){
    alert('voila');
  }
  document.getElementsByTagName('head')[0].appendChild(script);
}

Upvotes: 1

lsoliveira
lsoliveira

Reputation: 4640

That sure looks like a task for Require.js, instead of all the additional complexity...

It will abstract all the complexity of loading the scripts and also provide you with nice dependency resolution methods.

Edit: Updated to respond to poster needs.

Since you are really trying to use the method above, the problem is that you're using an asynchronous programming construct (setTimeout) to execute some code at a later time but expecting a synchronous result.

Your tryReady() method is called within the first if (without arguments? why?) and returns immediatly, since jQuery is not ready (presumably and unless your infra-structure is really, really fast) and your // Functions making use of jQuery go here line is hit at that moment.

In the meantime, setTimeout will kick in and try to check if jQuery is loaded. This process repeats until jQuery is loaded and that will trigger your alert("jQuery wasn't but now is loaded") line. It's only at that moment that you know jQuery is really loaded (inside that else statement).

It works if you add the alert because the alert window is synchronous and holds your script execution until the OK button is pressed. The time it takes for you to do that will probably be enough for jQuery to load and, as such, you can then reference it.

Also, I don't really know what you're trying to achieve with time_elapsed since it's never used for anything meaningful...

Upvotes: 0

Related Questions