10

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.

Rob W
  • 341,306
  • 83
  • 791
  • 678
Mike B
  • 101
  • 1
  • 3
  • 1
    Thanks for helping. I've spent many hours looking for a solution to this issue. This is the first place I've found where I am getting quality help by people more in the "know" than I. Other websites seem to restate the same info found here: http://api.jquery.com/jQuery.noConflict/ and here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries. I've also contacted the creator of the drop down menu and the creator of the hoverIntent plugin but both say they are too busy to help. Thanks again for the help. Mike – Mike B Jun 28 '10 at 14:54
  • Dunno why I didn't think of this before, but I found this in Firefox's error console: Error: invalid array length Source File: http://www.myreoforeclosures.idxco.com/javascript/prototype.js Line: 30 – George Marian Jun 29 '10 at 07:20
  • I forgot to mention, that error indicates an issue w/ something that is using prototype, not necessarily a conflict with jQuery. It may also be an issue w/ the prototype library itself (maybe a bug, issue with your copy), though it's less likely. – George Marian Jun 29 '10 at 08:02

6 Answers6

3

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.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Pointy - Sorry, deleted my comment after you updated your answer. ;o) – user113716 Jun 27 '10 at 20:00
  • Hey @patrick: did you notice that the error that's happening on the page seems to happen when something in jQuery calls "shift()" on something (probably an array), and then that causes a hop over into a Prototype override of a native method? I bet that's what the problem is; it's basically a jQuery 1.3.2 bug in the "Prototype-proofing" of the library. – Pointy Jun 27 '10 at 20:04
  • Pointy - You're probably on to something. I was just using Safari's developer tools, and the only thing I saw was an error in Prototype: `RangeError: Invalid array length.` The other thing I noticed was that 1.3.2 doesn't pass `window` into the closure. Not sure what the ramification is, but perhaps prototypejs's "prototyping" of `Array` bleeds over if jQuery doesn't have a clean `window` object? Not sure if that makes sense, but I think you've got it nailed. – user113716 Jun 27 '10 at 20:10
  • @patrick - http://www.myreoforeclosures.com/_menutestfromcode2-noHI-alert.html (alert works). Appreciate your help. Understand if you have other stuff to do and need to look this later. – Mike B Jun 28 '10 at 17:08
1

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

user113716
  • 318,772
  • 63
  • 451
  • 440
  • I am now using 1.4.2 on both the page that works (prototype.js commented out) and the page that doesn't work (prototype.js linked). No luck. – Mike B Jun 28 '10 at 14:33
  • @Mike - Well, the rest of your jQuery seems to be running without error, so it is probably not specifically a noConflict issue. Also, the error takes place when your `megaHoverOver` and `megaHoverOut` callbacks run. So I have a feeling that it has nothing to do with the hoverIntent plugin. Just to verify, could you please remove the hoverIntent configuration so it runs with just jQuery so we can eliminate that? – user113716 Jun 28 '10 at 15:10
  • @patrick - Commented out hoverIntent in both versions- http://www.myreoforeclosures.com/_menutestfromcode-noHI.html http://www.myreoforeclosures.com/_menutestfromcode2-noHI.html removing kills them both - including the one w/prototype.js commented out. -BTW appreciate the help. – Mike B Jun 28 '10 at 15:31
  • @Mike - Sorry, I should have been more clear. I meant to comment out the `$j("ul#topnav li").hoverIntent(config);`, and replace it with a traditional hover: `$j("ul#topnav li").hover(megaHoverOver,megaHoverOut);` – user113716 Jun 28 '10 at 15:46
  • @patrick - like this? http://www.myreoforeclosures.com/_menutestfromcode-noHI.html (works) http://www.myreoforeclosures.com/_menutestfromcode2-noHI.html (doesn't work). – Mike B Jun 28 '10 at 15:59
  • @Mike - I have a feeling that prototype is crashing something else, so your jQuery code never gets a chance to run. Try this. In your ` – user113716 Jun 28 '10 at 16:39
  • @patrick - http://www.myreoforeclosures.com/_menutestfromcode2-noHI-alert.html (alert works). Appreciate your help. Understand if you have other stuff to do and need to look this later. – Mike B Jun 28 '10 at 17:06
  • @Mike - Its alright. I'm actually just doing some outside work today, and checking in every so often. With your latest version, I'm getting a continuous flow of the `Invalid Array length` error at the rate of about 100 per second. We know its not the plugin, because you get the same problem with jQuery's hover. I see that in your `megaHoverOver()` function self-executing function which extends jQuery with `calcSubWidth()`. You should move that out of your `megaHoverOver()` function since it only needs to run once to extend jQuery. This is not the issue, though. – user113716 Jun 28 '10 at 17:48
  • ...so, I'm stumped. The hover doesn't work regardless of the `hoverIntent` plugin. But when the plugin is there, I get the `Invalid Array length` error, and I don't when its not there. Only other thing I'd try (and I'm just grabbing at straws at this point), would be to place all the jQuery code at the top of the ``, before prototypejs loads. Not sure if it would help, but maybe it will make a difference. Sorry I wasn't more help. :o( – user113716 Jun 28 '10 at 17:53
  • @patrick - do appreciate the time to help. I will do more research. I am learning a lot by going through all of this. – Mike B Jun 28 '10 at 19:29
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.

Audacitus
  • 125
  • 8
0

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Use the jQuery.noConflict() method.

Grz, Kris.

Kris van der Mast
  • 16,343
  • 8
  • 39
  • 61
  • From the question: *"I've tried many variations of the jQuery noConflict() resolutions suggested at the jQuery website"* – user113716 Jun 27 '10 at 19:05
  • Well perhaps not the one I suggested. As he doesn't mention it we can't be sure so I think my answer's still a valid one. – Kris van der Mast Jun 27 '10 at 19:08
  • 1
    My point is that you've added nothing useful since the OP is aware of `noConflict()` and can't get it to work. And you didn't actually suggest a `noConflict()` resolution. You just said to use it. – user113716 Jun 27 '10 at 19:10
  • Perhaps I'm not getting these forums but I told: use the jQuery.noConflict() method. I see that as a clear suggestion. – Kris van der Mast Jun 27 '10 at 19:15
  • 1
    The question was *I can't get the jQuery noConflict() resolutions to work*. Your answer was *use the jQuery.noConflict() method*. Your answer is to do what the OP already tried. There's apparently some other issue. – user113716 Jun 27 '10 at 19:19
  • Calling `noConflict()` does not magically repair all potential problems with the namespace collision. It's still necessary to deal with the fact that code that uses `$` and expects it to mean `jQuery` **will not work** after `noConflict()` is called. – Pointy Jun 27 '10 at 19:51
0

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

George Marian
  • 2,680
  • 20
  • 21
  • thanks for looking at this. Both links produce a drop down menu? I know this works: http://www.myreoforeclosures.com/_menutestfromcode.html because there is no call to prototype.js but this version does not produce a drop down menu http://www.myreoforeclosures.com/_menutestfromcode.html due to a conflict with the prototype.js. – Mike B Jun 29 '10 at 04:31
  • Darn, I didn't notice the 2nd domain. Of course both worked for me, as I use NoScript. Sorry Mike, had I checked it in Chrome or IE I would've noticed that one is indeed not working. The ironic thing is that I even checked the source of both pages, to make sure that one did have prototype commented, but didn't notice the slight difference in the URL to that prototype library. – George Marian Jun 29 '10 at 05:35
0

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);
Cristian Sanchez
  • 31,171
  • 11
  • 57
  • 63