“If jQuery” Snippet
Earlier today I was asked to remove a JavaScript error. The problem was that this particular partial was being used in places that had jQuery and places that didn’t. In the places where jQuery did not exist, an error was being generated about the $() syntax.
After a quick Google and a browse at a few of the results, I didn’t get any information on how to check to see if jQuery exists on a page. So, while this may not be the best solution, it is a solution to only execute a piece of jQuery JavaScript if jQuery exists.
var jQuery = jQuery || false;
if (jQuery) {
// jQuery only stuff here.
}
If jQuery has been included in the document, the function jQuery will exist and thus the jQuery only block will execute. If jQuery has not been included, jQuery is set to false and so the block will not execute.
Of course, if someone makes a variable called jQuery and assigns it a value then this won’t really work — but why the hell would you do that?
Update:
Thanks to Thomas R. for suggesting a non-assignment method. Despite it not working, it made me try to find a way of doing it without the assignment.
if (window.jQuery) {
// jQuery only stuff here.
}
1:27 pm
Hello,
nice snippet, maybe this solution is cleaner as there is no variable assignement :
if(jQuery || false) {
[...]
}
5:04 pm
Hey there, Thomas.
I had tried your solution previously, however it unfortunately generates an error:
jQuery is not defined
[Break on this error] if (jQuery || false) {
Which is why my little snippet had the assignment before the check. However, I have found nicer way of doing this check that requires no assignment, based on an idea your comment gave me — so thank you!
Have updated my post to include the new method.
11:56 pm
Hi,
I use another way to do it.
When I write a script using jQuery, I like to use $() instead of jQuery(). but other libraries also use $.
So I always write my scripts into a self executing function receving jQuery as a parameter called $.
This way, I’m sure I won’t have problems with others libraries, and I can check jQuery exists by the way.
In the same time, my self executing function receives a second parameter representing undefined value. This way I can check undefined values faster.
Exemple :
(function($, undefined) {
if($ == undefined)
throw ‘jQuery not loaded’;
$(’#myId’).text(’Piece of script using jQuery here’);
})(jQuery);
You can also be more accurate by checking the type of the $ variable (must be “function”), and you can check the jquery version with the property $.fn.jquery
(function($, undefined) {
if(typeof $ != ‘function’ || typeof $.fn != ‘object’ || parseFloat($.fn.jquery) < 1.3)
throw ‘jQuery not loaded or too old’;
$(’#myId’).text(’Piece of script using jQuery here’);
})(jQuery);
11:21 am
window['jQuery'] ought to work.
10:34 am
Thanks, this tutorial has me very helped.
12:29 am
Hello, thank you for this informative tutorial. It helped me improving my skills greatly. It is ever excellent to get some newly inspiration and I hope to read more of such posts here in future because nobody will ever stop learning new things. Go ahead