jQuery & Prototype Conflict

Question

I am using the jQuery AutoComplete plugin in an html page where I also have an accordion menu which uses prototype.

They both work perfectly separately but when I tried to implement both components in a single page I get an error that I have not been able to understand.

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: file:///C:/Documents and Settings/Administrator/Desktop/website/js/jquery-1.2.6.pack.js :: anonymous :: line 11" data: no]

I found out the file conflicting with jQuery is 'effects.js' which is used by the accordion menu. I tried replacing this file with a newer version but newer seems to break the accordion behavior.

My guess is that the 'effects.js' file used in the accordion was modified to obtain the accordion demo output. I also tried using the overriding methods jQuery needs to avoid conflict with other libraries and that did not work.

I obtained the accordion demo from stickmanlabs.com.

And the jQuery AutoComplete can be obtained from jQuery site.

Has any one else experienced this issue?

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.