如何通过更改对话框选项来重用jQuery UI对话框

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

you can set different buttons as option before dialog open

eg

var  buttons = {
        "act_add": {
        "Insert": function() { ... },
        "Cancel": function() { ... }
        },
        "act_edit": {
        "Save": function() { ... },
        "Delete": function() { ... }
        }
      };

    $('.dialogOpenLink').click(function(){
      var $dlg = $('#dialog'),
      actType;

      //get an action name from data attribute of the clicked element
      actType = $(this).data('action'); //or get the action in way that best suits you

      $dlg.dialog( "option", "buttons", buttons[actType]);
      $dlg.dialog('open');
    });

Answer 2

jQuery UI dialog allows you to manipulate most properties after initialization. You can change the buttons some time after the dialog is initialized; eg 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.

Answer 3

To safelly remove dialog all you need is to set close option like this:

close: function() {
 return $(this).remove();
}