#5438 closed bug (notabug)
prototype, jQuery UI and Opera
| Reported by: | Zabrimus | Owned by: | |
|---|---|---|---|
| Priority: | critical | Milestone: | |
| Component: | ui.dialog | Version: | 1.8 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I have a conflict with Prototype and jQuery UI. Opera (10.10, Linux) shows some weird behavior, which makes jQuery UI unusable with Opera.
This conflict does not appear with Firefox. Because of using Apache Tapestry, i have no chance to drop prototype.
Take a look at my minimal sample html and try to move or resize the dialog.
Comment out the prototype script and try it again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict();
jQuery(function(){
jQuery('#support').dialog({
autoOpen: true
});
});
</script>
</head>
<body style="cursor: auto;">
<div aria-labelledby="ui-dialog-title-support" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1008; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px; position: absolute; height: auto; width: 300px; top: 154.5px; left: 486px;">
<div style="-moz-user-select: none;" unselectable="on" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span style="-moz-user-select: none;" unselectable="on" id="ui-dialog-title-support" class="ui-dialog-title"> </span>
<a style="-moz-user-select: none;" unselectable="on" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#">
<span style="-moz-user-select: none;" unselectable="on" class="ui-icon ui-icon-closethick">close</span>
</a>
</div>
<div style="width: auto; display: block; min-height: 112px; height: auto;" class="ui-dialog-content ui-widget-content" id="support">TEST</div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-n"></div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-w"></div>
<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></div>
<div unselectable="on" style="z-index: 1002; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-sw"></div>
<div unselectable="on" style="z-index: 1003; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-ne"></div>
<div unselectable="on" style="z-index: 1004; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-nw"></div>
</div>
</body>
</html>
Attachments (1)
Change History (8)
Changed 13 years ago by
| Attachment: | prototype_jquery_opera_conflict.html added |
|---|
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
Please report this bug in jQuery's bug tracker.
comment:3 Changed 13 years ago by
| Resolution: | invalid |
|---|---|
| Status: | closed → reopened |
I'm not sure why this has been closed and marked as invalid as it will affect many users who have to use jQuery and prototype together.
The fix above - adding the check && (toString.call(elem) === "[object Window]") seems to work.
The problem affected me on a site which was already using prototype but on which I needed to use
the jQuery accordion plugin. The plugin failed to open and close segements correctly in IE, Konqueror
and Opera, but applying this fix cured the problem. I have tested in FF 3.6.8 and Konqueror 4.5.0 (Linux),
IE6, IE8, Opera 10.61, Chrome 5.0.357.127 (XP) and Safari 4.1.1 (Mac).
I can find two places in the source where you are checking that an element is a window in this way:
offset.js in the getWindow function
dimensions.js does it walk and quack like a window?
Here are the patches:
--- dimensions.js 2010-09-07 05:53:06.000000000 +0100
+++ dimensions.js.new 2010-09-08 09:53:25.000000000 +0100
@@ -31,7 +31,7 @@
});
}
- return ("scrollTo" in elem && elem.document) ? // does it walk and quack like a window?
+ return ("scrollTo" in elem && elem.document && (toString.call(elem) === "[object Window]")) ? // does it walk and quack like a window?
// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
elem.document.compatMode === "CSS1Compat" && elem.document.documentElement[ "client" + name ] ||
elem.document.body[ "client" + name ] :
--- offset.js 2010-09-08 09:54:30.000000000 +0100
+++ offset.js.new 2010-09-08 09:54:37.000000000 +0100
@@ -275,7 +275,7 @@
});
function getWindow( elem ) {
- return ("scrollTo" in elem && elem.document) ?
+ return ("scrollTo" in elem && elem.document && (toString.call(elem) === "[object Window]")) ?
elem :
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow :
comment:4 Changed 13 years ago by
Profuse apologies. I messed up my testing. The fix above does not work in the case of the accordion problem.
During testing, I had commented out the scrollTo method in prototype and forgotten to uncomment it.
The temporary removal of this method from prototype is what actually fixed the problem.
comment:5 Changed 13 years ago by
Now retested with prototype's scrollTo method in place, and I can confirm that the fix provided
in the two patches in my post above does indeed work correctly.
Apologies again for the confusion.
comment:6 Changed 13 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | reopened → closed |
Closing invalid for the same reason it was closed before. The problem is in jQuery, not jQuery UI.
After further investigation i found problem in jQuery.
This line in jQuery seems to be the problem:
return ("scrollTo" in elem && elem.document) ? // does it walk and quack like a window?Opera and Firefox: "scrollTo" in elem is true, if prototype is loaded and false otherwise
Opera: elem.document is always true, independent of prototype
Firefox: elem.document is undefined, independent of prototype
After patching this line to
return ("scrollTo" in elem && elem.document && (toString.call(elem) === "[object Window]")) ? // does it walk and quack like a window?the dialog behaves like expected.