modal dialog doesn't work in IE8 when including prototype.js

modal dialog doesn't work in IE8 when including prototype.js

Greetings,

I've run into a problem with dialog plugin using JQuery and Prototype.js together in IE8.

The following code doesn't display the modal dialog correctly.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html>
    <head>
        <title>test</title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
        <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.2/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
           jQuery.noConflict(); // allow $ to bind with prototype library
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js" type="text/javascript" ></script>
       
    </head>
    <body>
    <script type="text/javascript">
        jQuery(document).ready(function() {                  
            jQuery('#dialog').dialog({
                autoOpen: true,
                height: 300,
                width: 400,
                modal: true   
            });        
        });
    </script>
    <div id="dialog">hello this is a dialog</div>
    </body>
    </html>



























The dialog box appears clipped and if you attempt to move it a javascript error occurs in jquery-ui.min.js.
  1. Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
    Timestamp: Sat, 3 Jul 2010 11:14:24 UTC

    Message: Object doesn't support this property or method
    Line: 332
    Char: 492
    Code: 0
    URI: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js









I tried different combinations... placing the prototype.js line before the jquery libraries and after. Same behavior. I've tried different DOCTYPEs. Same behavior.

If you remove the prototype.js library reference or run IE8 in compatibility mode, then the dialog appears fine and the behavior seems normal.


I'm running IE8 ver. 8.0.6001.18702 on Win XP (SP3).

BTW, the code above runs fine in Firefox.

Has anyone else run into this problem?

/robert