Как повторно использовать JQuery UI Dialog, изменив параметры диалога

Question

Я знаю, что правильный способ управления JQuery.dialog - это инициализация с помощью:

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

Затем откройте и закройте его с помощью следующего:

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

Но есть некоторыеслучаи, когда эта модель не полностью применима.

Например, я использую диалог для создания новых данных и для редактирования существующих данных.В первом случае у меня есть кнопка cancel и create , но во втором случае у меня также есть кнопка delete .

IЯ видел, что в jquery.dialog есть функция уничтожения.Вопрос в том, нужно ли в этих случаях уничтожать диалог, а не закрывать его и создавать новый?Есть ли лучший вариант?

Answer 1

вы можете установить различные кнопки в качестве опции перед открытием диалога

например

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 позволяет вам манипулировать большинством свойств после инициализации.Вы можете менять кнопки через некоторое время после инициализации диалога;например, когда нажата кнопка вставки или обновления.

// 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" />

Альтернативным способом будет добавление кнопок непосредственно внутри формы и .hide() их в зависимости от того, отображается ли диалог вставки или обновления.

Answer 3

Для безопасного удаления диалога все, что вам нужно, это установить опцию закрытия следующим образом:

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