jQuery & Prototype Conflict

Question

Hi,

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 the following site: http://www.stickmanlabs.com/accordion/

And the jQuery AutoComplete can be obtained from: http://docs.jquery.com/Plugins/Autocomplete#Setup

Has any one else experienced this issue?

Thanks.

Answer 1

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: http://michaelshadle.com/2007/07/03/jquerys-no-conflict-mode-yet-another-reason-why-its-the-best/

Answer 2

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.

Answer 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.

Answer 4

Hey its of great help. It got resolved in just 2 mins for me.

Answer 5

Here is more detailed explanation and work around. http://praveenbattula.blogspot.com/2010/02/jquery-conflict-when-using-different.html

Answer 6

"There is never a good reason to use two javascript frameworks like this."

Yes there is. For example, the Drupal CMS ships with jQuery, and many contributed modules expand and build on this foundation. However, there are situations where you then want to add that nifty javascript gadget which doesn't have a 1:1 jquery equivalent. Also, according to SunSpider benchmark data, each javascript framework has it's own strengths and weaknesses with regard to performance.. so it's great to know Drupal 7 finally defaults to wrapping all jquery code within anonymous functions!