jQuery Error: $ is not a function

This is a fun little jQuery error you’ll hit sometimes when you are trying to integrate jQuery into an already established system like Wordpress or Drupal, that is already using a Javascript library like prototype.  The problem is that you are hitting conflicts between the two libraries.  And most likely they are fighting over the $ .

Luckily, jQuery is prepared to handle this!  Good’ol jQuery.

jQuery has a “noConflict” mode, that will let all the jQuery content to run without using the $.  You just state that you are running in noConflict mode in your first line, then instead of using $(function(){…}, you replace the $ with jQuery, so it looks like this: jQuery(function(){….

Here’s a full example.

<script>

jQuery.noConflict(); // Tell jQuery you are going with noConflict mode.

jQuery(function(){ // Replace the $ with jQuery
jQuery(‘div’).doStuff();
});

</script>

This will allow the other library to use the $ without conflict.

2 Responses to “jQuery Error: $ is not a function”

1. Levitra says:

   January 11, 2012 at 3:55 pm

   Your website is really very informative. Thank you for that.
2. Mirko says:

   March 6, 2012 at 12:52 pm

   Thanks a lot, this post is very useful, now I’m able to use jquery in my drupal website successfully