jQuery : How To Fix the “$ is not a function” Error Using noConflict

Posted in Web Development on 30 October 2009 15 comments

If you tested your page using FireBug in Firefox and found the error "$ is not a function" or "$ is not defined", most likely you are using other libraries in your page. Libraries that conflicts with jQuery includes MooTools, Prototype, etc.

Also, if your jQuery scripts failed without reason (I mean there’s nothing wrong with your codes), most probably you are having this problem too.

Solving The Conflict With jQuery

jQuery has a built-in function to solve this issue, that is "jQuery.noConflict();". There are a number of ways to use noConflict, but personally I think this is best way (and recommended by jQuery team too) :

Let’s say this is your old codes:

?View Code JAVASCRIPT
$(document).ready(function() { 
  $('a').click( function(event) {
    $(this).hide();
    event.preventDefault();
  });
});

Now change it to this:

?View Code JAVASCRIPT
var $jq = jQuery.noConflict();
$jq(document).ready(function() { 
  $jq('a').click( function(event) {
    $jq(this).hide();
    event.preventDefault();
  });
});

Explaination

As you can see, the noConflict is assigned to a variable called $jq. You can change the “jq” to a unique name, but it’s best to keep is short because you need to use it a lot. Then, replace all occurrences of dollar sign $ to the new $jq.

That’s it.

This problem usually occurs in wordpress themes, like my MonoShade theme, because the theme users might have installed plugins that uses other libraries beside jQuery alone. Follow the steps above and it should be able solve the problem.

 

Posted by Zen on 30 October 2009 • 44,363 visits 15 comments
Tags :


or Subscribe to specific category only :




  - 15 Comments


Cyprian Gwóźdź says:

Thanks. Helpful!
I used to use $jQuery, but $jq is faster and cleaner option.

Cheers!

Unibands says:

Hi there, I’ve tried this solution but it still hasn’t solved my problem. Here’s my code below:

[code]

//

[/code]

Many thanks,
Michael.

Unibands says:

…hmm, I just put my code in those code tags and it didn’t output, what the??

Lea says:

Thank you for this! Very helpful..

salute:)

Cem says:

Thanks really,
that is so helpfull, you save my day!

Nayan Paul says:

Thanks for posting , its really helpfull.
One question when i doing wordpress theme intergration,me also find same problems i.e $ is not a function even i put jQuery.noConflict(); in header.
After doing some R&D ,i use this code

(function($,undefined){
$(document).ready(function(){
$(‘#comment’).howtotechie();
});
})(jQuery);

i.e (function($,undefined){

})(jQuery); solve this problems.

hjpoell says:

Hah! This solved a nasty $(“.tweet”).tweet is not a function error finally with 3 lines of code… Okay thx!

Stuart Clark says:

Thanks very much saved me a lot of time.

Edi Amin says:

Excellent tip. Works like a charm! Thanks a lot :)

Josh says:

Oh my god this is the greatest line of code in the world. Thanks heaps

Tony says:

Thanks helped me stax too.. just to ask
Do i have to add a different var for every script using jQuery on my site?

IE: if i have chat, mailinglist, online-store script all loaded onto one page, must each have a different var.. Like so:

example:
var $chat = jQuery.noConflict();
var $mlist = jQuery.noConflict();
var $store = jQuery.noConflict();

or can they all just be:
var $jq = jQuery.noConflict();

?
regards and thanks.

php developer says:

jQuery(“#nwpsNav-1″).attr(“src”) is undefined

Jake says:

Thanks for the good explanation!

Ashkar says:

Great idea.. Helped me.. Thanks.. :)

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»