How to prevent JQuery code from executing until JQuery souce is found 1

[tyhand]

Hey all,

I have the following code in an external JS file (ie: test.js); which creates an additional script tag pointing to a JQuery source if it detects that a JQuery source isn't already there. The code actually creates the script tag and inserts it before the actual script that's doing the creating:

// CODE...
if (typeof(jQuery) == "undefined") {
var head = document.getElementsByTagName("head")[0];
// get any and all script tags
var scripts = document.getElementsByTagName("script");
// the actual script call the actions (ie: this one "test.js")
thisScript = scripts[scripts.length - 1];
// create element
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");

head.insertBefore(script,thisScript);
}
// ...END CODE

The above works fine by itself. However, I have 2 problems:

1) Once the JQuery source script tag is created, the rest of the code on "test.js" doesn't work. It's as if the code can't access the JQuery functions (or doesn't know that JQuery is there).

Thus, the following code on "test.js" doesn't work:

$(document).ready(function() {

// ...

});

I understand from another forum that this is happening because the JQuery functions aren't available yet; the JQuery hasn't yet loaded.

OK... this brings me to #2.

2) I was advised to create initialization code or use require.js in order to prevent the $(document).ready() code from triggering the jquery. This is where I'm lost and need help.

I've tried using if-then control structures, executions with document.onload, window.onload, settimeout, etc - All in an effort keep the code from triggering the JQuery until the JQuery has actually loaded... but no cigar.

So, I guess the question is: how do I keep the Jquery code in the "test.js" file from executing until the JQuery has loaded?

By the way, I checked out requirejs.org but have no idea how that comes into play. Such is the limitation of my coding experience

Any and all help, suggestions, and insights are welcome.

NOTE: I know I can just place JQuery on target page; however, that isn't an option as the code has to be able to detect if JQuery is there; and if not, then create the script tag pointing to JQuery.

 

[vacunita]

You could try the onload event of the script object, and place your jquery dependent ready code in there:

i.e.

...
script.onload = function(){
    $(document).ready(function() {
	...
     });
 }	 
 head.insertBefore(script,thisScript);

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[tyhand]

Hey Vacunita,

Thanks.

Tested it a few different ways, but no cigar

Still getting the "$ is not defined" error (as before).

Very difficult cracking this nut; may have to go totally different route.

Perhaps some one else may know.

Thanks again.

 

[tyhand]

Ok Got it. Read an article at hunlock dot com and figured it out.

You were right after all. I was just implementing it the wrong way.

Thanks again.

- Jay

 

[vacunita]

Glad I could help

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech