I’m sure you’ve seen some of the sweetness of JQuery and most likely you’ve used Prototype for dynamic web applications like Lightview, Prototip, etc. However, let’s say we want to use the two together, on the same page. Problemo!

The Problem

JQuery uses a “$” as a shortcut for “jQuery” and Prototype uses “$” as well. We can’t have JQuery and Prototype using the same “$” namespace.

The Fix

Thankfully JQuery has a neat little function called jQuery.noConflict( ) which you basically just need to stick at the top of your JQuery file and replace the “$” alias with “jQuery” for each function. Example:

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Of course, there are other ways of solving this issue with jQuery.noConflict( ), but the method above was the most simple and straightforward for me.

NOTE: JQuery doesn’t get along with MooTools and YUI very well either, luckily this can also be solved with the jQuery.noConflict( ) trick.

Let me know if you have any questions or run across any other issues while using JQuery and Prototype. I have a feeling the more popular JQuery becomes, the more and more people will run into this issue.