Opened 13 years ago

Closed 13 years ago

Last modified 10 years ago

#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">&nbsp;</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)

prototype_jquery_opera_conflict.html (3.3 KB) - added by Zabrimus 13 years ago.

Download all attachments as: .zip

Change History (8)

Changed 13 years ago by Zabrimus

comment:1 Changed 13 years ago by Zabrimus

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.

comment:2 Changed 13 years ago by Scott González

Resolution: invalid
Status: newclosed

Please report this bug in jQuery's bug tracker.

comment:3 Changed 13 years ago by phildriscoll

Resolution: invalid
Status: closedreopened

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 phildriscoll

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 phildriscoll

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 Scott González

Resolution: invalid
Status: reopenedclosed

Closing invalid for the same reason it was closed before. The problem is in jQuery, not jQuery UI.

comment:7 Changed 10 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.