How to re-use jQuery UI Dialog by changing dialog options

Question

I know the correct way to manage JQuery.dialog is to initialize with:

$("#dialog").dialog({ autoOpen: false });

Then use the following to open and close it:

$("#dialog").dialog("open");
$("#dialog").dialog("close");

But there are some cases when this model is not fully applicable.

For instance, I use a dialog to create new data and to edit existing data. In the first case I have a cancel and a create button, but in the second case I have also a delete button.

I've seen that there is a destroy function in jquery.dialog. The question is: in these cases, should I destroy the dialog instead of close it and create a new one? There is any better option?

Answer 1

jQuery UI dialog allows you to manipulate most properties after initialization. You can change the buttons some time after the dialog is initialized; e.g. when the insert or update button is clicked.

// imported from http://jsfiddle.net/salman/VYAJw/9/

$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    modal: true
  });
  $("#button-insert").click(function() {
    $("#dialog1").dialog("option", "title", 'Insert Record');
    $("#dialog1").dialog("option", "buttons", [{
      text: "Insert",
      click: function() {
        alert("Record inserted");
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog1").dialog("open");
  });
  $("#button-update").click(function() {
    $("#dialog1").dialog("option", "title", 'Update Record');
    $("#dialog1").dialog("option", "buttons", [{
      text: "Update",
      click: function() {
        alert("Record updated");
        $(this).dialog("close");
      }
    }, {
      text: "Delete",
      click: function() {
        alert("Record deleted");
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog1").dialog("open");
  });
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
body {
  font: medium sans-serif;
}

#dialog1 label,
#dialog1 input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog1">
  <p>Fill out this form.</p>
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" />
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
      <label for="password">Password</label>
      <input type="password" name="password" id="password" />
    </fieldset>
  </form>
</div>
<input type="button" id="button-insert" value="Insert" />
<input type="button" id="button-update" value="Update" />

An alternate method would be to add the buttons directly inside the form and .hide() them depending on whether you're showing insert or update dialog.