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 strongest side.
-
you can probably get it worked out, but i bet it would be easier to just find a popup lightbox in jquery or a marquee in prototype and only use one of the libraries. they can be very tempermental about working together. that said, your issue probably has to do with the scoping of your calls, and the order that you include your libraries and plugins.Ken– Ken2011-08-10 16:20:01 +00:00Commented Aug 10, 2011 at 16:20
-
I might end up doing just that, but if I can get a fix for this issue then I'd rather keep using jQuery since I'm a bit more familiar with it. Also, what should the order be for including libraries and plugins? And pardon my ignorance, but what is the scoping of my calls?Rick Anthony– Rick Anthony2011-08-10 16:35:14 +00:00Commented Aug 10, 2011 at 16:35
4 Answers
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:
- 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).
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.
Comments
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
6 Comments
$ with jQuery?
.extend, but that doesn't tell me much. If I could find the source of the problem it would make fixing it much easier.$'s to jQuery and still the same error. What else could be causing this? :(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.
Comments
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>
1 Comment
$ with jQuery like @Diodeus said... Still getting that same error. I would have used all-jQuery but there were scripts being used on the site before I started changing things, and I'd prefer to leave those untouched.