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.