How to avoid conflict between JQuery and Prototype

Question

If a page has both JQuery and Prototype then I got conflict. There is a option to disable $ sign for JQuery so there is no conflict but, I have to use keyword JQuery instead of $.

I wonder if there is any option for Prototype to solve this conflict. Is there any way to use both libraries without compromising their benefit or short keyword?

As far as I know, it is not a good idea to use multiple JS library for same page; but it may be helpful for sometimes.

Answer 1

Use the noConflict method for jQuery and assign it to a new (short) variable. Use the new variable wherever you would have used the $ for jQuery.

var $j = jQuery.noConflict();

$j(function() {
    $j('#selector').each( .... );
});

or, if you don't need to mix Prototype/jQuery you can wrap all of your jQuery code in an anonymous function.

(function($) {
    // $ sign here is a parameter, which is set to jQuery 

    $(function() {
        $('#selector').each( .... );
    });
})(jQuery);

Answer 2

Better write what can't you do with jQuery and can with Prototype? ;) (to now, I believe jQuery can do all)

Answer 3

A more detailed explanation is here. http://praveenbattula.blogspot.com/2010/02/jquery-conflict-when-using-different.html