jQuery and prototype.js conflict, how to keep jQuery as $?

Question

So I'm working on a website that uses both jQuery and prototype.js, however their conflicting.

I've researched a fair bit and found that the only way people fix this issue is by using

<script>
 jQuery.noConflict();

 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery(\"div\").hide();
 });

 // Use Prototype with $(...), etc.
 $('someid').hide();

However I don't want to change $ to jQuery as that means I'd have to edit a fair bit of pre written code. Is there a way to stop them conflicting and leave jQuery as $?

Solution 1

Instead of using document ready you can create a closure (at the end of the body) like:

(function($) {
  //jQuery stuff
  $('.elem') // $ refers to jQuery
})(jQuery);

If I understand your question correctly

Solution 2

Nope, not that I've heard of. To minimize code conversion pain you could do something like this though:

var j$ = jQuery.noConflict();

You could then replace jQuery $ calls with j$. You could probably even use a simple search/replace call.

Solution 3

( function($){
   // $('jquery here')
})(jQuery);

All jquery code inside the function can use $.