I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.

What could be causing this, and how I can fix this behavior?

Thanks.

$('#myDialog').dialog({
            autoOpen: false,
            buttons: {
                "No": function()
                {
                    $(this).dialog('close');
                    //do stuff
                },
                "Yes": function()
                {
                    $(this).dialog('close');
                    //do stuff
                }
            },
            draggable: false,
            modal: true,
            resizable: false,
            title: "Confirmation",
            width: "500px",
            zIndex: 2000
        });

and later

$('#myDialog').dialog('open').show();

Pretty standard.

New information

I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.

1.) An outer dialog uses ajax to replace its content with my content.

2.) My content launches a dialog that was previously created and set to not autoopen.

3.) The outer dialog is destroyed as the inner dialog is closed.

4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.

I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.

What could be causing this, and how I can fix this behavior?

Thanks.

$('#myDialog').dialog({
            autoOpen: false,
            buttons: {
                "No": function()
                {
                    $(this).dialog('close');
                    //do stuff
                },
                "Yes": function()
                {
                    $(this).dialog('close');
                    //do stuff
                }
            },
            draggable: false,
            modal: true,
            resizable: false,
            title: "Confirmation",
            width: "500px",
            zIndex: 2000
        });

and later

$('#myDialog').dialog('open').show();

Pretty standard.

New information

I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.

1.) An outer dialog uses ajax to replace its content with my content.

2.) My content launches a dialog that was previously created and set to not autoopen.

3.) The outer dialog is destroyed as the inner dialog is closed.

4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.

• javascript
• jquery
• jquery-ui
• internet-explorer-6

• a link/screencast of the issue, or maybe showing your script would help – redsquare Commented Jul 15, 2009 at 0:10

4 Answers 4

You should open your dialog using

$('#myDialog').dialog('open');

instead of

$('#myDialog').show();

The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.

I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.

I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.

More info: http://docs.jquery./UI/Dialog#option-bgiframe

Regards.

By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?

The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.

You may want to test it.

Marcus