prototype.js / jQuery.js conflict and resolution

when you use jQuery and prototype javascript frameworks togather on the same page, it creates conflicts.

jQuery has provided a resolution to this conflict. The resolution goes as below:

verriding the $-function:

1) you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:



<script src="prototype.js">
</script>
<script src="jquery.js">
</script>
<script>
     jQuery.noConflict();

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

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






2) Additionally, there's another option. If you want to make sure that
jQuery won't conflict with another library - but you want the benefit
of a short name, you could do something like this:



<script src="prototype.js">
</script>
<script src="jquery.js">
</script>
<script>
     var $j = jQuery.noConflict();

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

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