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?

Answer 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.