Question

I having trouble displaying buttons in my jquery-ui dialog box after I set autoOpen to false.

I set up my dialog box with a button like this.

$(document).ready(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});

After clicking on something else on the page, I run this line to open up my dialog box.

$("#dialog-form").dialog("open");

However, the dialog box does not show any buttons. I find that if I set autoOpen: true, then the buttons will show up when the dialog box immediately opens. How can I get the buttons to show while requiring the dialog box to be opened through call (i.e. setting autoOpen: false)?

Answer 1

According to the API the original code should work too:
An example from the API:

....
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>
...

I didn’t see the code initialized at document ready … if the code is not initialized at document ready the part containing tags for the widget could not be loaded yet and the widget will be not initialized. When calling $( "#dialog-form" ).dialog( "open" ); an new initalization will be applied so the buttons will not appear.

Put your JS init code inside a document.ready section

$(function() {

  $("#dialog-form").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
  });

});