jQuery & Prototype Conflict

Solution 1:

There are two possible solutions: There was a conflict with an older version of Scriptaculous and jQuery (Scriptaculous was attempting to extend the native Array prototype incorrectly) - first try upgrading your copy of Scriptaculous.

If that does not work you will need to use noConflict() (as alluded to above). However, there's a catch. Since you're including a plugin you'll need to do the includes in a specific order, for example:

<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function($){
    $("#example").autocomplete(options);
  });
</script>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="accordion.js"></script>

Hope this helps to clarify the situation.

Solution 2:

jQuery lets you rename the jQuery function from $ to something else to avoid namespace conflicts with other libraries.

You can do something like this

var J = jQuery.noConflict();

Details here: michaelshadle.com — jQuery's no-conflict mode: yet another reason why it's the best

Solution 3:

I don't really see the reason for using both libraries at the same time in this case.

You can either use Prototype's (well, Scriptaculous' actually) Ajax.Autocompleter and ditch jQuery, or you can use jQuery's Accordion and get rid of Prototype.

Using both libraries at once is not really a good idea, because:

1. They can cause conflicts.
2. By including them both you force your users to download them both. Which is not bandwith friendly approach.