Load jQuery dynamically

Question

I am having issues with loading jQuery with Javascript. I need to load it with Javascript because there are conditions that I only can know client-side. The commented out code is supposed to initialize the scripts, but I am having no luck with them.

var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
//script_tag.onload = main; // Run main() once jQuery has loaded
//script_tag.onreadystatechange = function () { // Same thing but for IE
 //if (this.readyState == 'complete' || this.readyState == 'loaded') main();
//}
document.getElementsByTagName("head")[0].appendChild(script_tag);

http://mybsabusiness.com/samplesites/silver/sbsa01/

This is the site that the problems are on.

• Esailija: do you get any errors? what does main do?
• sachleen: What exactly is the problem? That code works perfectly fine. jsfiddle.net/4Euhk
• Matt Dodge: Show us the main function too, this code works for me
• Luke James Emery: When I used it, it returned an error saying something akin to the library not existing.

Answer 1

From the jQuerify bookmarlet :

function getScript(url, success) {
 var script = document.createElement('script');
 script.src = url;
 var head = document.getElementsByTagName('head')[0],
 done = false;
 // Attach handlers for all browsers
 script.onload = script.onreadystatechange = function() {
 if (!done && (!this.readyState
 || this.readyState == 'loaded'
 || this.readyState == 'complete')) {
 done = true;
 success();
 script.onload = script.onreadystatechange = null;
 head.removeChild(script);
 }
 };
 head.appendChild(script);
}
getScript('http://code.jquery.com/jquery-latest.min.js',function() {
 // Yay jQuery is ready \o/
});​