开发者

jQuery and Prototype - collision causes broken functionality

开发者 https://www.devze.com 2023-03-27 06:26 出处:网络
I\'m restructuring a page for a client, and I\'m having some issues with the jQuery code I implemented on the page.

I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.

There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.

I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").

Here is the page: -link removed by author-

Here is prototype.js: -link removed by author-

I have absolutely no idea what is causing this error and JavaScript isn't my stron开发者_StackOverflow社区gest side.


When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:

  1. Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release, didn't work right and even produced a stack overflow error).
  2. Changed around the order of the scripts, and changed noConflict:

    <script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script> 
    <script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
    <script type="text/javascript">
    <!--
    // more jquery, all $'s replaced with jQuery
    -->
    </script>
    <script type="text/javascript"> 
    <!--
    jQuery.noConflict();
    -->
    </script>       
    <script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script> 
    <script type="text/javascript">
    <!--
    // everything else, including prototype scripts
    -->
    </script>
    

And that's it! Now I don't get the "Line 464" error and all scripts work fine. Thank you @Ken and @Diodeus for leading me to the solution.


You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.


Surround the code that uses jQuery with

(function ($) {
... // Your code
})(jQuery)

This way it uses local $ which is bound to jQuery and and jQuery only.

Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.


I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.

If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins

<script src="scripts/prototype.js" type="text/javascript"></script> 
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
<!--
    $.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
0

精彩评论

暂无评论...
验证码 换一张
取 消