Как улучшить поведение кнопки отмены и сделать так, чтобы кнопка закрытия работала так же, как кнопка отмены?

Question

Я устанавливаю небольшое окно для установки и обновления параметров различных модулей в веб-приложении, для этого я использую диалоговое окно jQueryUI, которое загружает настройки из каждого модуля одновременно.Моя проблема в том, что если вы нажмете кнопку «Отмена», она вернет все настройки в исходное состояние, даже если я внес изменения ранее и сохранил их, прежде чем снова открыть диалоговое окно и отменить.Кроме того, я бы хотел, чтобы кнопка «Закрыть» имела то же поведение, что и кнопка «Отмена».

    var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;

var closedFunction = function() {
    $(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
    $(appDiv).dialog( "close" );
    $(Container).append(appDiv);
};
var cancelFunction = function() {
    $(appDiv).dialog( "close" );
    appDiv.innerHTML = backupDiv;
    $(Container).append(appDiv);
}
$(appDiv).dialog({
    "modal": true,
    "title": "Edit",
    "close": closedFunction,
    "buttons": {
        "Save": closeFunction,
        "Cancel": cancelFunction
    },
    "minWidth": 600
});

Шаг за шагом:1. Откройте диалоговое окно и внесите некоторые изменения,2. Сохраните изменения,3. Откройте диалоговое окно еще раз, не внося никаких изменений,4. Нажмите кнопку Отмена.На этом этапе я теряю изменения, которые я сделал ранее и сохранил на шаге 2, и модуль возвращается в состояние, которое было до шага 1.

Я знаю, что с помощью

    appDiv.innerHTML = backupDiv;

вызывает потерю изменений в этой конкретной ситуации, но работает нормально, если я действительно хочу отменить любые изменения.

РЕДАКТИРОВАТЬ :Я продолжал копать, и до сих пор я нашел решение для копирования поведения Отмена на кнопку Закрыть 'X' ( Как узнать, было ли закрыто диалоговое окно jquery при выходе, и выполнить некоторый код ):

 var closedFunction = function (event, ui) {
    if (event.originalEvent) {
        cancelFunction();
    }
    $(appDiv).dialog("destroy");
};

Добавив это условие if в closedFunction (), я могу захватить, когда диалоговое окно закрывается нажатием кнопки «X» или нажатием клавиши «ESCAPE», тогда я могу вызывать cancelFunction () внутри if итеперь аналогично нажатию кнопки «Отмена».

Answer 1

Рассмотрим этот полуосновный пример.

$(function() {
  var appDiv = $("#appDialog");

  function editSetting(s) {
    $(".setting-id", appDiv).val(s.id);
    $(".setting-name", appDiv).html(s.label);
    $(".setting-value", appDiv).val(s.value);
    appDiv.dialog("open");
  }

  function saveSetting() {
    var sid = $(".setting-id", appDiv).val();
    var v = $(".setting-value", appDiv).val();
    $("#" + sid).data("value", v);
  }

  function resetDialog() {
    $(".setting-id", appDiv).val("");
    $(".setting-name", appDiv).html("");
    $(".setting-value", appDiv).val("");
  }

  appDiv.dialog({
    autoOpen: false,
    modal: true,
    minWidth: 300,
    buttons: [{
      text: "Save",
      icon: "ui-icon-check",
      class: "ui-priority-primary",
      click: function() {
        saveSetting();
        appDiv.dialog("close");
      }
    }, {
      text: "Cancel",
      icon: "ui-icon-close",
      click: function() {
        appDiv.dialog("close");
      }
    }],
    close: function(e, ui) {
      resetDialog();
    }
  });

  $(".app .edit-setting").button().click(function(e) {
    var that = $(this).parent();
    var setting = {
      id: that.attr("id"),
      label: $("label", that).text(),
      value: that.data("value")
    };
    editSetting(setting);
  });

  $("form", appDiv).submit(function(e) {
    e.preventDefault();
    saveSetting();
    appDiv.dialog("close");
  });

  $(".app > .save").button().click(function() {
    var settings = {};
    $(".app li").each(function(ind, el) {
      var k = $(el).attr("id");
      var v = $(el).data("value");
      settings[k] = v;
    });
    //Save Settings to Storage
    console.log(settings);
  });
});

.app ul {
  margin: 10px;
  padding: 0;
  list-style: none;
  width: 300px;
}

.app ul li {
  border: 1px solid #CCC;
  padding: .5em;
  margin-bottom: -1px;
}

.app ul li:first-child {
  border-radius: 3px 3px 0 0;
}

.app ul li:last-child {
  border-radius: 0 0 3px 3px;
}

.app ul li label {
  display: inline-block;
  width: 200px;
}

.app .save {
  margin-left: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="app ui-widget">
  <ul>
    <li id="set-1" data-value="A"><label>Setting 1</label><button class="edit-setting">Edit</button></li>
    <li id="set-2" data-value="B"><label>Setting 2</label><button class="edit-setting">Edit</button></li>
    <li id="set-3" data-value="C"><label>Setting 3</label><button class="edit-setting">Edit</button></li>
  </ul>
  <div id="appDialog" class="appDiv" title="Edit Setting">
    <form>
      <input type="hidden" class="setting-id" />
      <label class="setting-name"></label>: <input type="text" class="setting-value" />
    </form>
  </div>
  <button class="save">Save Settings</button>
</div>

Если мы рассматриваем диалог как контейнер или шаблон, мы можем заполнить отдельный диалог различными битами данных.Затем нужно открыть и закрыть его.

При нажатии кнопки «Редактировать» текущая настройка и значение загружаются в диалоговое окно до его открытия.Нажатие «X» или нажатие «Отмена» закрывает диалоговое окно без сохранения.Заключив нашу запись в <form>, мы можем использовать Введите , чтобы отправить форму или нажать «Сохранить».Оба настроены на сохранение значения перед закрытием диалога.

Я добавил функцию сброса к обратному вызову закрытия, поэтому каждый раз, когда диалог закрывается, он удаляет все более старые данные.Это не совсем необходимо, поскольку, когда мы открываем диалоговое окно, оно заполняет данные в поля.

Мы должны где-то хранить значения.Для этого примера я использую атрибут data.Его можно добавить как часть HTML и прочитать с помощью jQuery.Это не поддерживает.Вы можете увидеть кнопку окончательного сохранения, и это может прочитать новые значения и отправить их в localStorage или базу данных.

Надеюсь, это поможет.