posted by Pete Recently I ran into an issue while trying to use jQuery on a custom WordPress based Content Management System. This particular system had a number of instances in which the framework was being referenced. Normally you insert jQuery code using the dollar sign ($) like so:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
The problem arises when a different system grabs the $ variable. All of the sudden you have multiple $ variables being used as objects from multiple libraries, resulting in the error console message “$ is not a function”.
Fortunately there is a pretty easy way of fixing this in the form of jQuery.noConflict. Running this function gives control of the $ variable back to whichever library first implemented it. This will help to ensure that jQuery won’t conflict with other instances of the $ object in other libraries.
But please note, in doing this, you are re-assigning the variable so you will only be able to access jQuery commands using the ‘jQuery’ variable (which has just replaced ‘$’). So our above code example would look something like this:
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("a").click(function() {
alert("Hello world!");
});
});
It doesn’t seem to be a very common problem and only occurs when multiple instances of the object crop up, but that’s easy to do in WordPress when multiple plugins begin conflicting with each other. Follow the link for the full jQuery documentation on jQuery.noConflict
Thanks Man! very useful article.
Thank’s , I am newbie on jQuery ^^
No problem, just glad it helped
And Envio, we all gotta start somewhere, eh?
Very useful article. Thank you!
Dude, you just saved me. I couldn’t figure out what was wrong with my code.
var $ = jQuery.noConflict();
$(function){…
Also works
Nice positing
Hi!
I stumbled upon this article: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/ and I was wondering what’s wrong with this solution:
function($) { // we can now rely on $ within the safety of our “bodyguard” function $(document).ready( function() { alert(”nyah nyah! I’m able to use ‘$’!!!!”); } ); } ) ( jQuery );Hi Esteban.
Is that function not working for you? If its working for your particular space, there should be nothing whatsoever wrong with using it.
As Mads demonstrated above, one of the great things about programming / problem solving is that there is generally many ways to accomplish a problem.
Thank you Man
No problem Nicolo
Just glad it helped.
Very useful article thanks alot man……
merci beaucoup pour cette information, Merci pour un autre blog d’information , maintenir le bon travail !
I have been messing with this for so long and finally gave up. Just revisited the situation and you helped make my jQuery work.
Thank you SO much! UGH…
it works for me!
This was a great help in getting some jquery running on a Drupal 7 site, looks like something else had grabbed “$” as a variable.
I used Mads’s method of
var $ = jQuery.noConflict();
and it worked fine.
Thanks for the info!
Hi;
I cannot identify what’s wrong in my code.It’s functions are not working.The below one is my code.
var $ =jQuery.noConflict();
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click Me
Perfect! Thank you for this simple, yet very effective post.
I had this same problem and this helped me solve it:
var $ = jQuery.noConflict();
thank you!
This post really helped me a lot. I thank everybody here from the bottom of my heart
Brilliant. I was struggling to get jPlayer running in Drupal 7 until Firebug popped up this error message. Thanks for pointing out the solution.
Thanks alot.It worked just fine
Ahhhh man I’ve been wondering that for ages, I kept following the examples on the main site incojunction with slider from dynamic drive, I’ve been scratching my head as to why $ wasn’t working (I wont say how long for)
Cheers!
If this tip isn’t working for you, try this replacing all your $()’s with jQuery().
Didnt notice it, but I had the same issue and decided to write an article on this which came out quite similar to this one
http://techinfogurus.com/modules/editor/view_article.php?id=18
was really messed up with my jquery, it really worked for me…Great work.. Thanks a lot!!!!
Thanks for sharing – made my day!
awesome
Thank you very much