Why is this jQueryUI dialog not working in IE9?

Asked 3/2, 2012 at 0:17 Answered 29/3, 2017 at 12:44

Solved jquery internet-explorer internet-explorer-9

The following code produces the expected jQueryUI modal popup dialog in Firefox, Chrome, and Opera. However, it fails in Internet Explorer 9:

<html><head>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function() {
    $( "#AddUser" ).dialog({
        autoOpen: false, modal: true, height: 'auto', width: 400,
        buttons: {
            "Add": function() {
                alert("Add one!");
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#AddUserButton" ).button().click(function(event) {
        event.preventDefault();
        $( "#AddUser" ).dialog( "open" );
    });


});
</script>

</head><body>

<div id="AddUser" title="Add User">Popup content here</div>
<input type="submit" id="AddUserButton" />

</body></html>

In IE 9 the #AddUser div is not a jQueryUI dialog. Is there anything that I am missing?

EDIT: Code updated to closer to production code.

Thanks.

Mier answered 3/2, 2012 at 0:17 Comment(3)

@NadirMuzaffar: The div is simple displayed on the screen. – Mier 3/2, 2012 at 0:31

Are you using the lasted jquery/jqueryui version? – Atrocity 17/8, 2012 at 22:56

As mentioned in the code, the jQuery version is 1.7.1. However, the answer has already been found, see below. Thanks! – Mier 18/8, 2012 at 17:7

you problem is the trailing "," IE doesn't like it

 $( "#AddUser" ).dialog({
                   autoOpen: false, modal: true >>,<<
            });

this will work:

 $( "#AddUser" ).dialog({
                   autoOpen: false, modal: true
            });

Belvia answered 3/2, 2012 at 0:21 Comment(2)

Thank you, that does fix it in the code that I had posted! However the production code has some other features, and there is no trailing comma on them. I updated the code in the question. Thanks. – Mier 3/2, 2012 at 0:31

This turned out to be a whole world of pain! You got me past the first hurdle, though. Thanks! – Mier 3/2, 2012 at 2:13

Try to add DOCTYPE in the html file. <!DOCTYPE HTML>

Ravelment answered 3/2, 2012 at 0:43 Comment(1)

Thanks, that in fact was one of the problems. – Mier 3/2, 2012 at 2:14

Ok, this is just a guess, but type="submit" sometimes is weird on ie...

have you tried: <button id="AddUserButton">AddUser</button>

also i would call "preventDefault" as last action inside the action listener.

Belvia answered 13/2, 2012 at 15:22 Comment(1)

Thank you. However, the issue has already been solved, and IE happened to be fine with the <button> code. The issues seemed to be the extra comma , and the fact that I was using jQuery 1.5. Updating the jQuery 1.7 and removing the comma , solved the issue. – Mier 13/2, 2012 at 15:58

I had the same issue with dialog and adding following in css file did the job for me.

.ui-widget-overlay
{
        z-index: 0 !important;   
}

Comorin answered 29/3, 2017 at 12:44 Comment(0)

Recommended topics

Hot tags