Problem with dojo Dialog in IE7_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-15 10:30 出处：网络

I\'m trying to use dojo\'s dialog box in a page in my application but having some problems with the page in IE7 (or in IE 8 in some cases, when the page is viewed in compatibility mode).

I'm trying to use dojo's dialog box in a page in my application but having some problems with the page in IE7 (or in IE 8 in some cases, when the page is viewed in compatibility mode). Following is a rough skeleton structure of the page i'm trying to write.

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/do开发者_如何学Cjo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.Dialog");

        var secondDlg;
        dojo.addOnLoad(function() {
                var foo = new dijit.Dialog({id:'testDialog', title: "test dialog", content: "test content" }, dojo.byId('dialog1Container'));
                foo.startup();


                var foo2 = new dijit.Dialog({id:'testDialog2', title: "test dialog 2", content: "test content 2" }, dojo.byId('dialog2Container'));
                foo2.startup();
        });

        wrapper = function() {
            dijit.byId('testDialog').show();
        }
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
    />
</head>

<body class=" claro ">
    <p>
        When pressing this button the dialog will popup. Notice this time there
        is no DOM node with content for the dialog:
    </p>
   <a onClick="wrapper();"> Show the test dialog</a>
   <br />
   <a onClick="dijit.byId('testDialog2').show();"> Show the test dialog</a>
   <div id="dialog1Container"></div>
   <div id="dialog2Container"></div>

   </body>

In IE7, the page just hangs when it tries to display the dialog box from the 1st link. Here are some symptoms of the malady ailing this page:

It breaks if there are more than 1 Dijit.dialog in the dom. If there is only 1, then it works fine
If there are more than 1 dialogs instances in the dom, only the last one works correctly. All previous ones end up freezing the browser.
The work around i'm using is to dynamically create an instance of dijit.Dialog in my js and insert it into the dom container and hitch a custom method to hide it. And when i'm hiding it i also call destroy on the dialog so it removes the dialog from the dom. This allows me to have multiple places in my page which can use the dialog, but only 1 will be displayed and be present in the dom at any point of time

And some extra info:

The html doc type i'm using is DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
It works fine in FF, Chrome and IE 8, only breaks in IE 7
I'm using dojo 1.5 (not the one from google's site, but a copy from my server, but i cant put that in the sample code)

Anybody have any idea about dojo's dialog having problems in IE 7?

Turns out this wasn't a problem with the dijit Dialogs itself, there was an event handler (not connected to dojo at all) which was causing the error, which is why it wasn't reproducible in a standalone page.