#5438 closed bug (notabug)

Opened March 26, 2010 05:25PM UTC

Closed September 08, 2010 12:01PM UTC

Last modified October 11, 2012 09:15PM UTC

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)

prototype_jquery_opera_conflict.html (3.3 KB) - added by Zabrimus March 26, 2010 05:25PM UTC.

Change History (7)

Changed March 29, 2010 06:25AM UTC by Zabrimus comment:1

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.

Changed July 16, 2010 09:32PM UTC by scottgonzalez comment:2

resolution:	→ invalid
status:	new → closed

Please report this bug in jQuery's bug tracker.

Changed September 08, 2010 09:28AM UTC by phildriscoll comment:3

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 :

Changed September 08, 2010 10:31AM UTC by phildriscoll comment:4

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.

Changed September 08, 2010 10:54AM UTC by phildriscoll comment:5

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.

Changed September 08, 2010 12:01PM UTC by scottgonzalez comment:6

resolution:	→ invalid
status:	reopened → closed

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

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:7

milestone:	TBD

Milestone TBD deleted

Search and Top Navigation