Insert Script into Head using Prototype

Question

Hi Guys,

I am trying to insert jQuery into the head of a page using prototype but not entirely sure how to achieve this.

Basically, I want the jQuery to appear AFTER the first tag in the head ?

var script_head = document.createElement('script');
script_head.type = "text/javascript";
script_head.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script_head);

But doesn't appear to be working ?

Answer 1

I think your code works, but you may have a conflict between jQuery and Prototype re: the $() function.
I think you'll also need to set jQuery to use noConflict mode

var JQ = jQuery.noConflict();

You will have to wait until jQuery is fully loaded first tho because you are dynamically loading it, so you could do something like:

var script_head = document.createElement('script');
script_head.type = "text/javascript";
script_head.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script_head);


function isJQueryLoaded() {
    if( window.jQuery == 'undefined' ) {
        setTimeout( isJQueryLoaded, 200 );
    } else {
        window.JQ = jQuery.noConflict();
        runJQ();
    }
}
isJQueryLoaded()

function runJQ() {
   // your jQuery code here but using JQ instead of $

}