jQuery and Prototype conflicts in IE8 when loading jQuery after setTimeout, noConflict doesn't help

208 views
Skip to first unread message

Ron Gross

unread,
Sep 16, 2011, 1:51:04 AM9/16/11
to prototype-s...@googlegroups.com
Cross posted to jQuery mailing list.

This problem seems to be quite old. I searched the forums and Google for the resolution, but haven't found it.
What I do is:

1. Load Prototype
2. Load jQuery (link to it) but not executing any code.
3. After a timeout, I call jQuery.noConflict(), and then try to use prototype.

This works on all major browsers except IE (I tested IE 8).

Some of the suggestions I saw call to load jQuery first instead of last. This is not an option for me, since I can't mess around with the order of the libraries. Also, it seems that if the call to jQuery.noConflict() is moved before the setTimeout block, the problem does not reproduce. This is not a good option for me too, because I have to run my code within setTimeout.

Here is a standalone reproduction of the problem: http://jsbin.com/ihiluc/3

Any thoughts will be welcome. This is happening with latest jQuery (1.6.4) and Prototype.(1.7.0.0).

T.J. Crowder

unread,
Sep 16, 2011, 7:18:39 AM9/16/11
to Prototype & script.aculo.us
Hi,

I'm afraid your requiremnets cannot be satisified with unedited
library files. If you load jQuery and Prototype on the same page, you
_must_ use noConflict immedately after loading jQuery, not after a
delay. This is because Prototype, at present, relies on the global `$`
symbol in various places (it _really really shouldn't_, this is what
scoping functions like the one used by jQuery are for!), including
where it's firing its "dom loaded" event. So you get an error if
Prototype tries to fire "dom loaded" before noConflict is called.

So you must put the noConflict call outside the setTimeout call. That
doesn't mean any of your other code has to be there, just that call.
So change:

setTimeout(function() {
try {
jQuery.noConflict();
$("first").addClassName("blue");
}
catch (e) {
alert(e);
}}, 500);

to

jQuery.noConflict();
setTimeout(function() {
try {
$("first").addClassName("blue");
}
catch (e) {
alert(e);
}}, 500);

Your only other alternative is to use an edited prototype.js file,
which will be non-trivial.

HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Sep 16, 6:51 am, Ron Gross <ron.gr...@gmail.com> wrote:
> Cross posted to jQuery mailing list<http://forum.jquery.com/topic/jquery-and-prototype-conflicts-in-ie8-w...>
> .
>
> This problem seems to be quite old<http://stackoverflow.com/questions/2830510/jquery-noconflict-not-work...>.
Reply all
Reply to author
Forward
0 new messages