The secret is that it is difficult to get Prototype to play nicely with JQuery, while it is rather trivial to get JQuery to play nicely with Prototype. This may seem like a minor distinction, but it is one that will save you a lot of headaches.
Right under that line, in your Rails application layout, we'll insert the one-liner that makes JQuery play nicely with Prototype, YUI, etc.
<script> // this allows jquery to be called along with scriptaculous and YUI without any conflicts // the only difference is all jquery functions should be called with $j instead of $ // e.g. $j('#div_id').stuff instead of $('#div_id').stuff var $j = jQuery.noConflict(); </script>
Try doing this with Prototype (especially if you're using other scripts built on top of Prototype and Scriptaculous), and you'll soon find yourself pulling out your hair.
If you simply want the ability to use both libraries together in your app, then congratulations, you're done. You can now do this:
Notice the first line uses the Prototype element id selector,
$ with a Scriptaculous effect, and the second line uses the new noConflict JQuery selector
Let's assume that we'd like to phase Prototype out of our app in favor of JQuery. In addition to going through your application and replacing all of your Prototype code with JQuery code, you'll need to take care of the Rails Prototype helper magic (note that when Rails 3 becomes the standard, this won't be necessary).
.script/plugin install git://github.com/aaronchi/jrails.git
Now, your Rails helpers, such as
form_remote_tag, etc. are using JQuery to build the AJAX code instead of Prototype on the back end. Isn't Rails magic neat?
There is one more step if you're using the
observe_form helper method. This helper relies on Prototype's
Element.observe method, which does not exist in the standard JQuery library.
No worries, someone has done the work for you already (not me). Just download and include the JQuery delayed observer plugin in your layout, and you're all set.
Once you've eliminated all Prototype/Scriptaculous code from your project (meaning there should now be no
$ references in your entire project, only
$j), you can simply remove it Prototype0+Scriptaculous from your project.
And just to celebrate, remove the
var $j = jQuery.noConflict(); line from your application layout, and do a Find and Replace All
$ for your project. You have now ditched Prototype once and for all.