0
  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...
user1155986
  • 101
  • 4

2 Answers2

1

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);
}
Juicy Scripter
  • 25,035
  • 5
  • 70
  • 90
  • Thanks Juicy Scripter. You're right! Spot on, on load is the way to do it. I also found this post which has the same answer but a little fuller: http://stackoverflow.com/questions/5385070/how-to-pause-javascript-until-something-is-done – user1155986 Jan 19 '12 at 12:44
0

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

lsoliveira
  • 4,222
  • 3
  • 18
  • 30
  • This file needs node.js . Are you sure that he want to run this code on server side? – Reporter Jan 18 '12 at 11:55
  • `require.js` does not have a dependency on `node.js` and can run exclusively on the client side. Check the documentation: _RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it **can** be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code._ – lsoliveira Jan 18 '12 at 12:04
  • Yes I did that and I checked the manual again. You're right. However I read this has a dependenciy to node.js. – Reporter Jan 18 '12 at 12:19
  • Thanks a lot lsoliveira and reporter. I'll look into that, it looks like maybe I should have used reporter from the start. But the above is frustratingly close to working! What is that alert doing that makes jQuery available to the remaining scripts... Grrr! – user1155986 Jan 18 '12 at 13:31
  • @user1155986 - I've updated the post with an explanation on why your approaching isn't working. – lsoliveira Jan 18 '12 at 14:41