How to Make JQuery & Prototype Play Nice
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!
JQuery uses a “$” as a shortcut for “jQuery” and Prototype uses “$” as well. We can’t have JQuery and Prototype using the same “$” namespace.
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.
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.