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?

IE 8 won't hide it on load or close it when button is clicked in dialog? — jk.
– jk., Commented Feb 7, 2012 at 23:58
I also had this issue with IE8 and older, when inserting the dialog's element by $('<div></div>).appendTo(document.body) it solved by doing this by plain JS: var box = document.createElement('div'); document.body.appendChild(box); — MTVS
– MTVS, Commented Nov 9, 2013 at 6:24

tempid · Accepted Answer · 2012-02-07 23:57:35Z

2

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.

answered Feb 7, 2012 at 23:57

tempid

8,26828 gold badges74 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1048676 Over a year ago

That is my code. Are you saying use the first one or the second one?

tempid Over a year ago

@user1048676 I've updated the answer. Use the second one. Are you by any chance filling the content in the dialog-inner dynamically? I mean do you have <div id="dialog-inner"/> at first and populating the div with data later on?

tempid Over a year ago

If that didn't work, try this - <div id="dialog" class="event-dialog" title="Create Event" style="display:none;"> Explicitly set display to none. Or move display:none into the .event-dialog css class.

user1048676 Over a year ago

Actually for some reason it only doesn't work if I put in two hidden fields. If I add these two <input type="hidden" id="update_yes_no" value=""><input type="hidden" id="event_id" value=""> it doesn't work. When I take out these two it does work though.

tempid Over a year ago

The HTML is not valid for those fields. You're not closing the input tags.

|

jhonkola · Accepted Answer · 2012-10-17 11:10:20Z

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.

edited Oct 17, 2012 at 11:10

jhonkola

3,4251 gold badge19 silver badges32 bronze badges

answered Oct 17, 2012 at 11:00

Stefan

212 bronze badges

Comments

CIs DEv · Accepted Answer · 2013-01-10 11:41:56Z

1

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.

answered Jan 10, 2013 at 11:41

CIs DEv

111 bronze badge

2 Comments

Henrik Aasted Sørensen Over a year ago

Do you have any indication from the question that an extra, closing div-tag was the problem?

thegaffney Over a year ago

It might not of helped the original person, but it was the reason the same thing was happening to me

frogatto · Accepted Answer · 2014-06-11 17:12:40Z

1

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',

edited Jun 11, 2014 at 17:12

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

answered Oct 1, 2013 at 14:16

JJO

314 bronze badges

Collectives™ on Stack Overflow

IE8 not working with jQuery Dialog

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related