A little dab'll do ya
Code Snippets
Load jQuery Only If Not Present
Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if not, you do. This works for that.
Smart Asynchronous Way
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
// warning, global var
thisPageUsingOtherJSLibrary = true;
}
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;
// callback function provided as param
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
// Super failsafe - still somehow failed...
} else {
// jQuery loaded! Make sure to use .noConflict just in case
fancyCode();
if (thisPageUsingOtherJSLibrary) {
// Run your jQuery Code
} else {
// Use .noConflict(), then run your jQuery Code
}
}
});
} else { // jQuery was already loaded
// Run your jQuery Code
};Notice how there is multiple places the jQuery code you intend to run get's called. Don't repeat yourself there, put it in a function you can call to kick things off.
This code was adapted from here.
Document.write way
Hip kids don't use document.write, but if you are too old to care:
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined') {
if (! jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function() {
// do anything that needs to be done on document.ready
// don't really need this dom ready thing if used in footer
});
}
}
initJQuery();
!window.jQuery && document.write("");
Does the trick for me.
Any diffs in the final result?
Great code but if we want to use a jquery plugin, where do you have to insert the javascript file of this plugin exactly and how ? – To make the plugin file call after ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js‘ and before running our jQuery code.
i like to fondle myself while writing jquery.
I’m not a programmer, so I’m having some issues understanding and implementing this.
Using the asynchronous way, what’s the deal with “fancyCode()”? It seems like you’re telling me to use .noConflict() everywhere, but in which way?
This does seem to work on a page that already had jQuery running, but it fails with “fancyCode is not defined” on a page that doesn’t have jQuery. If I remove that line, then it says, “thisPageUsingOtherJSLibrary is not defined” referring to the line inside of getscript().
Here’s the code I’m working on: http://noodle.mx/scripts/widgets.js