Search jQuery

jQuery Forum

jQuery conflicts with Prototype and the fix

in Developing jQuery Core • 2 years ago

Hi, I found a conflict between jQuery and Prototype while debugging diigolet, a rather complex bookmarklet that uses jQuery.

To reproduce it:

Open http://prototypejs.org/ in google chrome, copy and paste content from http://code.jquery.com/jquery-1.4.3.js to the javascript console and run it. An error is thrown: Error: NOT_SUPPORTED_ERR: DOM Exception 9

The error is thrown by a call to div.getElementsByClassName("e") in sizzle.js.

HTMLElement.prototype.getElementsByClassName is overwritten by prototype.js and it uses $ which is overwritten by jQuery. The result is that jQuery can't finish initializing and prototype is also left broken.

window.$ and window.jQuery is exposed at the end of core.js before the feature detection code in sizzle.js.

// Expose jQuery to the global object
return (window.jQuery = window.$ = jQuery);

My fix to the problem is simple: just move the exposure code to the end of outro.js and call jQuery.noConflict(true) right after the jQuery code. Then both prototype and jQuery will be fine.

I know why the exposure is advanced to core.js but maybe there is a better way to avoid the conflict. e.g. Put sizzle.js code to the beginning because it doesn't rely on jQuery anyway.

Replies(10)

rwaldron

Re: jQuery conflicts with Prototype and the fix

2 years ago

I have another fix to suggest:

PrototypeJS should stop overwriting and extending native objects like HTMLElement.prototype.getElementsByClassName

dave.meth..

Re: jQuery conflicts with Prototype and the fix

2 years ago

Is that the most recent version of prototype.js? I thought they had stopped doing that.

arrixzhou

Re: jQuery conflicts with Prototype and the fix

2 years ago

It isn't the latest version of prototype.js. However, ironically it's the version used by their official web site.

Much effort has been made to make jQuery robust and unobtrusive since version 1.2. That's why I choose jQuery for my bookmarklet which may run in any hostile page. There are many web sites out there still using very old versions of prototype.js and perhaps other js files that are not good neighbors.

Of course, no library is guaranteed to work with broken native objects. But I think such conflicts can be reduced by following the design principal that one should interfere with the global scope as little as possible and as late as possible.

BTW, jQuery 1.4.2 doesn't have this conflict.

dave.meth..

Re: jQuery conflicts with Prototype and the fix

2 years ago

This is the prototype.js page on this issue:

http://www.prototypejs.org/api/element/getElementsByClassName

Although 1.7 is in beta, 1.6 is the most recent production version and it still has this issue.

If moving sizzle.js doesn't have any other impacts, it seems that we might as well do it to work around the issue.

Can you create a ticket and reference the thread here? http://bugs.jquery.com

arrixzhou

Re: jQuery conflicts with Prototype and the fix

2 years ago

A ticket for this issue has been created at http://bugs.jquery.com/ticket/7426

I just took a look at their latest code. While the immediate function pattern is adopted in many places, the corner stone $ still isn't protected in a local scope.

jQuery is so much better at being unobtrusive :)

temirbek

Re: jQuery conflicts with Prototype and the fix

2 years ago

man, where is your jquery code is located and where is your other script related to other libraries located?
You are talking like we were there when you were writing sizzle.js, outro.js and core.js