jQuery dialog not working properly

I have the following script:

<script type="text/javascript">
$( "#addLocation" ).dialog({
            autoOpen: false,
        modal: true,
        height: 700,
        width: 550,
        buttons: {
            "Add Location": function() {
                document.forms["mapform"].submit();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
});
</script>

<script type="text/javascript">
function showLocationDialog() {
    $("#addLocation").dialog("open");
}
</script>
开发者_运维知识库
<div id="addLocation" style="display:none;">
<form action="" method="post" name="mapform">
<input type="text" name="name" />
<input type="submit" />
</form>
</div>

<button onclick="javascript:showLocationDialog();">Add an address</button>

The button does not open the dialog and I cannot understand why.. can anyone assist?

Thanks,

Wait for the DOM to be ready.

Stick your .dialog() code in a $(document).ready() or $() block

1 - Put the .dialog() initialization into a $(document).ready() { ... });.

2 - Remove the extra comma from after the buttons value:

buttons: {
            "Add Location": function() {
                document.forms["mapform"].submit();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }, <-- remove this, causes IE to spontaneously combust

another thing to try...

remove the display:none css from the addLocation div..the dialog will take care of hiding everything once its initialized on document.ready