Jquery and Protoype Conflict

Question

<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'&gt;&lt;/script&gt;
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'&gt;&lt;/script&gt;
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt; 
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});

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

My code isnt working im not sure why? any advice?

Answer 1

You need to use jQuery.noConflict() to release $ back to prototype, like this:

jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
  jQuery("div.scrollable").hide();
});

$('div.box').hide();

Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).

You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:

var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
  $j("div.scrollable").hide();
});

$('div.box').hide();

Answer 2

Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.

Disable Prototype temporarily and see if your jQuery code performs as expected.