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

вопрос создан в Wed, May 8, 2019 12:00 AM

Я устанавливаю небольшое окно для установки и обновления параметров различных модулей в веб-приложении, для этого я использую диалоговое окно 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-диалог при escape-коде, и выполнить некоторый код ):

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

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

    
0
  1. Добро пожаловать в StackOverflow. Пожалуйста, предоставьте минимальный, полный и проверяемый пример: stackoverflow.com/help/mcve
    2019-05-08 16: 22: 00Z
1 ответ                              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>, мы можем использовать Enter для отправки формы или нажатия «Сохранить». Оба настроены на сохранение значения перед закрытием диалога.

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

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

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

    
1
2019-05-08 21: 59: 28Z
  1. Может быть, попробовать с локальным хранилищем? или вы просто хотите добавить некоторые элементы HTML?
    2019-05-08 23: 10: 02Z
  2. @ stanchacon не ясно, каковы намерения ОП, и он не указал их. Они могут передавать данные в сеанс, базу данных, localStorage или файл cookie. Это действительно зависит от решения.
    2019-05-08 23: 11: 00Z
  3. Я имею в виду, что локальное хранилище - отличный вариант для сохранения данных
    2019-05-08 23: 11: 51Z
  4. Спасибо @Twisty, ваше решение действительно помогло мнемного.
    2019-05-09 19:20:59 Z
источник размещен Вот