jQuery / prototype conflict

Question

I am using a jQuery hoverIntent.js script for a mega drop down menu system inspired by Son Tonaka's mega drop down w/CSS & jQuery sohtanaka.com/web-design/mega-drop-downs-w-css-jquery. My page includes a prototype.js script that is inserted by a 3rd party supplier (this is a real estate website that loads property search and lead management content). It loads last just before the tag. My menu script and jQuery calls are loaded at the top of the tag. Below I've included 2 links. The first link I've commented out the call to the prototype.js and the menu works fine. The second link has the call to the prototype.js and the drop down does not work.

1. Working drop down : http://www.myreoforeclosures.com/_menutestfromcode.html (prototype.js commented out)

2. Not working drop down: http://www.myreoforeclosures.com/_menutestfromcode2.html (with prototype.js working)

I've tried many variations of the jQuery noConflict() resolutions suggested at the jQuery website, but for the life of me, I cannot get the conflict resolved. I have reduced the above links to just the basics of the CSS and HTML to test the drop down.

Please note I am climbing a steep learning curve with Web 2.0/CSS/jQuery as this is my first attempt designing a website using these tools (vs table based websites previously).

Any help to get the jQuery and the prototype to work together would be greatly appreciated. I only have control of the jQuery script so any resolution has to be done to jQuery. I do not have any control over the prototype.js.

Answer 1

I had exactly the same problem! I'm using Jq 1.6.2 and a prototype.js, with the 'RangeError: Invalid array length'.

I almost gave up on it till I used Google's CDN copy of prototype, and all is good. I suppose what bug that was the issue now has been solved.

Answer 2

If that menu doesn't use prototype, you could redefine the $ variable to jQuery in a new block (via a self executing anonymous function).

(function ($) {
   // do stuff as usual
})(jQuery);

Answer 3

The menu seems to work for me at both URLs. (Firefox 3.6.4)

Edit: They seem to work for me, because my preferred browser is Firefox with NoScript. I didn't notice that the prototype library came from a different domain. =/

/headdesk

Answer 4

I suspect that the reason jQuery.noConflict() doesn't work is that the menu code continues to use $ to refer to jQuery functionality. All that noConflict() does is to unbind the $ global name from jQuery.

If you've got any code that expects $ to mean "jQuery", then it has to be changed to use jQuery instead. Otherwise, it'll pick up the Prototype $ which is of course a very different thing.

edit — ok I finally got your page to load (I think my network was having issues), so I see that you're using "$j" pretty consistently. Thus I don't think that the $ issue in the menu code is a problem, but I'll leave the comment here because it's still true that noConflict() isn't magic.

edit again — I would go with Patrick's suggestion to try Prototype 1.4.2.

Answer 5

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Use the jQuery.noConflict() method.

Grz, Kris.

Answer 6

I see that you're using an older version of jQuery. You've got 1.3.2 instead of 1.4.2.

Not sure if it would make a difference, but perhaps try the latest release.

You can link to it directly from Google's CDN:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js