Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is this jQueryUI dialog not working in IE9?

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.

like image 400
dotancohen Avatar asked Feb 03 '12 00:02

dotancohen


2 Answers

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
            });
like image 181
C. Holzberger Avatar answered Oct 13 '22 13:10

C. Holzberger


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

like image 43
Benz Bumroungruksa Avatar answered Oct 13 '22 12:10

Benz Bumroungruksa