Ticket #5438 (closed bug: notabug)

Opened 4 years ago

Last modified 18 months ago

prototype, jQuery UI and Opera

Reported by: Zabrimus Owned by:
Priority: critical Milestone:
Component: ui.dialog Version: 1.8
Keywords: Cc:
Blocking: Blocked by:

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

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

Change History

Changed 4 years ago by Zabrimus

comment:1 Changed 4 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 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to invalid

Please report this bug in  jQuery's bug tracker.

comment:3 Changed 4 years ago by phildriscoll

  • Status changed from closed to reopened
  • Resolution invalid deleted

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 4 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 4 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 4 years ago by scott.gonzalez

  • Status changed from reopened to closed
  • Resolution set to invalid

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

comment:7 Changed 18 months ago by scott.gonzalez

  • Milestone TBD deleted

Milestone TBD deleted

Note: See TracTickets for help on using tickets.