IE8 not working with jQuery Dialog

Question

I have an HTML form:

<div id="dialog" class="event-dialog" title="Create Event">
    <div id="dialog-inner">
    <table>
        <tr><td align="left">Event Name:</td><td align="left"><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"></td></tr>
        <tr><td align="left" valign="top">Event Description:</td><td><textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="3" cols="40"></textarea></td></tr>
        <tr><td align="left">All Day Event:</td><td align="left"><input id="all-day" type="checkbox" value="false"></td></tr>
     </table>
     </div>
</div>

I also have the following jQuery code:

jQuery("#dialog").dialog({
    autoOpen: false,
    height: 600,
    width: 700,
    modal: true,
    buttons: {
        'Create event': function () {
            name = jQuery("#name").val();
            jQuery(this).dialog('close');
        },
        Cancel: function () {
            jQuery(this).dialog('close');
        }
    },
    close: function () {
    }
});

I removed some stuff in my jQuery code just to shorten it up for StackOverflow. The code works in Chrome, Firefox, Safari, etc., but, for some reason, it just displays the dialog form in IE8. Any idea why it wouldn't hide the form in IE8?

Solution 1

I had the same thing happen to me a while ago. Is this your exact HTML code? If not, make sure you don't use self-closing tags within the dialog div.

 <div id="dialog-save">
    <div id="content" /> //this one didn't work.
    <div id="content"></div> //this one worked.
 </div>

For some reason, IE doesn't like self-closing tags for jquery-ui.

Solution 2

I had a similar problem, but my solution was another: On my website there are some flash objects. These objects are rendered by IE permanently in foreground. The result is, the dialog appears behind the flash objects, and I see only the lockscreen without a dialog.

My ugly solution: I hide the flash objects before the dialog is shown. When the dialog is closed, I show the objects again. That works.

Solution 3

In my case an extra closing div is creating problem.

<div class="comment_video"  >
 // content
</div>
</div>  // this closing div is creating problem.

I have removed the last extra closing div and it's working fine. It look like IE 8 very strict with HTML standards

I hope it helps.

Solution 4

I found the same bug by adding CSS class with jQuery like :

jQuery( "#dialog-noresult" ).dialog({
    modal: true,
    autoOpen: false,
    width: 500,
    height: 630,
    buttons: {
        "Cancel": {
             text: 'Cancel',
             class: 'dialog_Cancel',
             click: function() {
                 jQuery( this ).dialog( "close" );
             }
    }, ...
});

And I solved it by adding quote to the class option.

"class":'dialog_Cancel',

View more solutions