jQuery + Prototype on newest release (1.2.6)

[mike-584]

Hello,

I just made the jump from Prototype to jQuery and so far I'm really
enjoying it. However, some parts of my website are still using the
Prototype library and I don't have the time or resources at the moment
to recode everything using the jQuery framework.

The problem I have is that I can't seem to use both libraries on the
same page with the 1.2.6 release of jQuery. Here's a very simple
example of what I'm trying to do:

1) I load jQuery core 1.2.6
2) I load Prototype only if the page needs it (through a PHP
framework)
3) At the top of my page: after the jQuery <script> includes, but
before the Prototype ones (I don't think it matters?):

<script type="text/javascript">
    jQuery(document).ready(function($){
                var $j = jQuery;
                $j("#userImg").hide();
                //jQuery("#userImg").hide();
    });
</script>

This short script should hide a div with an ID of "userImg". However,
all I see is one of those two errors (they seem to appear randomly) in
the Firebug error console.

Error: [Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult:
"0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: {WEBSITE}/
jQuery/jquery.js :: anonymous :: line 871"  data: no]
Source File: {WEBSITE}/jQuery/jquery.js
Line: 22

OR

Error: [Exception... "Node cannot be inserted at the specified point
in the hierarchy"  code: "3" nsresult: "0x80530003
(NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "{WEBSITE}/jQuery/
jquery.js Line: 251"]
Source File: {WEBSITE}/jQuery/jquery.js
Line: 12

I tried all the methods described here (http://docs.jquery.com/
Using_jQuery_with_Other_Libraries), but with no luck. The same two
errors always pop in Firebug when using jQuery 1.2.6.

The exact same piece of code works perfectly when I load the 1.2.4
version of jQuery instead of the 1.2.6 (1.2.5 doesn't work either).

Can anyone think of a way I could fix this and use 1.2.6 (and further
versions). I would hate being stuck with an older version, especially
when updates to jQuery are frequent.

Thanks,
mike

[Alexander Bilbie]

Bump.

I've also been having the same problem.

Cheers,

Alex

On Thu, Jun 12, 2008 at 11:48 PM, mike <naxxk@...> wrote:

Hello,

I just made the jump from Prototype to jQuery and so far I'm really
enjoying it. However, some parts of my website are still using the
Prototype library and I don't have the time or resources at the moment
to recode everything using the jQuery framework.

The problem I have is that I can't seem to use both libraries on the
same page with the 1.2.6 release of jQuery. Here's a very simple
example of what I'm trying to do:

1) I load jQuery core 1.2.6
2) I load Prototype only if the page needs it (through a PHP
framework)
3) At the top of my page: after the jQuery <script> includes, but
before the Prototype ones (I don't think it matters?):

<script type="text/javascript">
   jQuery(document).ready(function($){
               var $j = jQuery;
               $j("#userImg").hide();
               //jQuery("#userImg").hide();
   });
</script>

This short script should hide a div with an ID of "userImg". However,
all I see is one of those two errors (they seem to appear randomly) in
the Firebug error console.

Error: [Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult:
"0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: {WEBSITE}/
jQuery/jquery.js :: anonymous :: line 871"  data: no]
Source File: {WEBSITE}/jQuery/jquery.js
Line: 22

OR

Error: [Exception... "Node cannot be inserted at the specified point
in the hierarchy"  code: "3" nsresult: "0x80530003
(NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "{WEBSITE}/jQuery/
jquery.js Line: 251"]
Source File: {WEBSITE}/jQuery/jquery.js
Line: 12

I tried all the methods described here (http://docs.jquery.com/
Using_jQuery_with_Other_Libraries), but with no luck. The same two
errors always pop in Firebug when using jQuery 1.2.6.

The exact same piece of code works perfectly when I load the 1.2.4
version of jQuery instead of the 1.2.6 (1.2.5 doesn't work either).

Can anyone think of a way I could fix this and use 1.2.6 (and further
versions). I would hate being stuck with an older version, especially
when updates to jQuery are frequent.

Thanks,
mike

[Rey Bango-2]

Mike & Alex,

What version of Prototype are you using? Also, are you using
Scriptaculous as well? If so, which version?

Rey

Alex Bilbie wrote:

> Bump.
>
> I've also been having the same problem.
>
> Cheers,
>
> Alex
>
>
> On Thu, Jun 12, 2008 at 11:48 PM, mike <naxxk@...
> <mailto:naxxk@...>> wrote:
>
>
>     Hello,
>
>     I just made the jump from Prototype to jQuery and so far I'm really
>     enjoying it. However, some parts of my website are still using the
>     Prototype library and I don't have the time or resources at the moment
>     to recode everything using the jQuery framework.
>
>     The problem I have is that I can't seem to use both libraries on the
>     same page with the 1.2.6 release of jQuery. Here's a very simple
>     example of what I'm trying to do:
>
>     1) I load jQuery core 1.2.6
>     2) I load Prototype only if the page needs it (through a PHP
>     framework)
>     3) At the top of my page: after the jQuery <script> includes, but
>     before the Prototype ones (I don't think it matters?):
>
>     <script type="text/javascript">
>        jQuery(document).ready(function($){
>                    var $j = jQuery;
>                    $j("#userImg").hide();
>                    //jQuery("#userImg").hide();
>        });
>     </script>
>
>     This short script should hide a div with an ID of "userImg". However,
>     all I see is one of those two errors (they seem to appear randomly) in
>     the Firebug error console.
>
>     Error: [Exception... "Component returned failure code: 0x80004005
>     (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult:
>     "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: {WEBSITE}/
>     jQuery/jquery.js :: anonymous :: line 871"  data: no]
>     Source File: {WEBSITE}/jQuery/jquery.js
>     Line: 22
>
>     OR
>
>     Error: [Exception... "Node cannot be inserted at the specified point
>     in the hierarchy"  code: "3" nsresult: "0x80530003
>     (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "{WEBSITE}/jQuery/
>     jquery.js Line: 251"]
>     Source File: {WEBSITE}/jQuery/jquery.js
>     Line: 12
>
>     I tried all the methods described here (http://docs.jquery.com/
>     Using_jQuery_with_Other_Libraries), but with no luck. The same two
>     errors always pop in Firebug when using jQuery 1.2.6. <http://1.2.6.>
>
>     The exact same piece of code works perfectly when I load the 1.2.4
>     version of jQuery instead of the 1.2.6 (1.2.5 doesn't work either).
>
>     Can anyone think of a way I could fix this and use 1.2.6 (and further
>     versions). I would hate being stuck with an older version, especially
>     when updates to jQuery are frequent.
>
>     Thanks,
>     mike
>
>

[mike-584]

No, the Scriptaculous library is not being loaded.

Prototype version: 1.5.1_rc3

[Rey Bango-2]

Mike,

Compatibility with release candidates is something that we can't really
promote because that means the library, in this case Prototype, is still
in a state of flux. Could you please try a final version of Prototype to
see if you still have the same issue?

v1.5.1, 1.5.1.1 & 1.5.2.2 have been out for some time now and can be
found here:

http://prototypejs.org/download

If you have problems after you use a stable/final release and can
provide a reproducible example, then we can see how we can help.

The main thing to keep in mind is that jQuery's noConflict is included
as a convenience for the jQuery community and we don't receive any
assistance from any other JS library teams. So if they decide to change
something between code bases, this type of issue may happen.

Rey...
jQuery Team

mike wrote:
> No, the Scriptaculous library is not being loaded.
>
> Prototype version: 1.5.1_rc3
>

[Wil Everts]

I've been using jQuery with Prototype (already having remove scriptaculous) for a while now at Zivity (slowly working our way to a Prototype-free world). We run jQuery in no conflicts mode: var $j = jQuery.noConflict(); with prototype loaded before jQuery in the head.

On the branch I'm currently working on I have jQuery 1.2.6 running in no conflict next to Prototype without any problems.

Regards,

Wil Everts
wil@...

[mike-584]

Thanks for the suggestions.

I just realized that ONE file from the Scritaculous source files
(effects.js) was being loaded. I'm still using some of those effects
on my old Prototype pages. The problem I'm having is most likely
associated with this file.

Are there any known conflicts between jQuery 1.2.6 and Scriptaculous
(when using jQuery.noConflict())?

Version of the effects.js file: 1.8.1 (latest)

[Rey Bango-2]

Thanks Wil,

I think most have a similar experience and hopefully this is isolated to
some form of older version of Prototype.

Where on Zivity are you using jQuery?

Rey...


Wil Everts wrote:

> I've been using jQuery with Prototype (already having remove
> scriptaculous) for a while now at Zivity (slowly working our way to a
> Prototype-free world). We run jQuery in no conflicts mode: var $j =
> jQuery.noConflict(); with prototype loaded before jQuery in the head.
>
> On the branch I'm currently working on I have jQuery 1.2.6 running in no
> conflict next to Prototype without any problems.
>
> Regards,
>
> Wil Everts
> wil@... <mailto:wil@...>

[Rey Bango-2]

Hi Mike,

Actually, there is an issue with noConflict and older versions of
Scriptaculous but not jQuery v1.2.6 and the most recent Scriptaculous.

You can check out the whole threads here:

http://groups.google.com/group/jquery-en/browse_thread/thread/69cb41d2e3710c70/f707b1df7821d026?hl=en&#f707b1df7821d026
http://groups.google.com/group/jquery-en/browse_thread/thread/dde6b91c3ad00ecc/25465bb7850810fa?hl=en%E6%8D%B9bb7850810fa

The issue wasn't so much a problem with jQuery as it was with
Scriptaculous overwriting the call() method with custom functionality
solely in effects.js. The script the implement is seen here:

Array.prototype.call = function() {
var args = arguments;
this.each(function(f){ f.apply(this, args) });
}

That is most likely the conflict you're experiencing. They've since
fixed that in the latest version of scriptaculous.

If after reading that and upgrading accordingly, if you still have a
problem, could you post up a test case so we can check it out?

Rey...

mike wrote:

> Thanks for the suggestions.
>
> I just realized that ONE file from the Scritaculous source files
> (effects.js) was being loaded. I'm still using some of those effects
> on my old Prototype pages. The problem I'm having is most likely
> associated with this file.
>
> Are there any known conflicts between jQuery 1.2.6 and Scriptaculous
> (when using jQuery.noConflict())?
>
> Version of the effects.js file: 1.8.1 (latest)
>

[mike-584]

Thanks a lot.

Removing the call method overwrite in effects.js (and clearing the
cache) helped.

Also, I found out that I was including the Prototype library AFTER the
jQuery one (as part of a framework on some of my pages). This was
causing unexpected behavior with jQuery.noConflict().

Problem solved. Thanks for your help.

[Rey Bango-2]

Great to hear Mike! :)

Rey

mike wrote:

> Thanks a lot.
>
> Removing the call method overwrite in effects.js (and clearing the
> cache) helped.
>
> Also, I found out that I was including the Prototype library AFTER the
> jQuery one (as part of a framework on some of my pages). This was
> causing unexpected behavior with jQuery.noConflict().
>
> Problem solved. Thanks for your help.
>