1 Câu hỏi: Làm thế nào để cải thiện hành vi của nút hủy và làm cho gần hoạt động giống như hủy?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi đang đặt một cửa sổ nhỏ để đặt và cập nhật các tham số của các mô-đun khác nhau trong ứng dụng web, vì điều này, tôi đang sử dụng hộp thoại jQueryUI tải các cài đặt từ mỗi mô-đun tại thời điểm đó. Vấn đề của tôi là nếu bạn nhấn nút hủy, nó sẽ đặt lại tất cả cấu hình về trạng thái ban đầu ngay cả khi tôi đã thay đổi trước đó và lưu chúng trước khi mở lại hộp thoại và hủy.
Ngoài ra, tôi muốn nút Đóng 'X' có hành vi tương tự như nút Hủy.

    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
});

Từng bước:
1. Mở hộp thoại và giới thiệu một số thay đổi,
2. Lưu các thay đổi,
3. Mở lại hộp thoại mà không thực hiện bất kỳ thay đổi nào,
4. Nhấn nút Hủy.
Tại thời điểm này, tôi mất các thay đổi tôi đã thực hiện trước đó và được lưu ở bước 2 và mô-đun quay trở lại trạng thái trước bước 1.

Tôi biết rằng sử dụng

    appDiv.innerHTML = backupDiv;

đang làm mất các thay đổi trong tình huống cụ thể này nhưng nó hoạt động tốt nếu tôi thực sự muốn hoàn tác bất kỳ sửa đổi nào.

EDIT :
Tôi tiếp tục đào và cho đến nay tôi đã tìm thấy một giải pháp để sao chép hành vi Hủy sang nút Đóng 'X' ( Cách tìm hiểu xem hộp thoại jquery có bị đóng khi thoát và thực thi một số mã ):

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

Bằng cách thêm mệnh đề if này trong hàm kín () cho phép tôi chụp khi hộp thoại đang được đóng bằng cách nhấn nút 'X' hoặc nhấn phím ESCAPE, sau đó tôi có thể gọi hàm Hủy bỏ () bên trong if và now tương tự như khi nhấn nút Hủy.

    
0
  1. Chào mừng bạn đến với StackOverflow. Vui lòng cung cấp một ví dụ Tối thiểu, Hoàn chỉnh và Có thể kiểm chứng: stackoverflow.com/help/mcve
    2019-05-08 16: 22: 00Z
1 Câu trả lời                              1                         

Hãy xem xét ví dụ bán cơ bản này.

$(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>

Nếu chúng ta coi hộp thoại giống như một thùng chứa hoặc mẫu, chúng ta có thể điền vào hộp thoại đơn với nhiều bit dữ liệu khác nhau. Sau đó, đó là vấn đề mở và đóng nó.

Khi nhấp vào nút 'Chỉnh sửa', cài đặt và giá trị hiện tại sẽ được tải vào hộp thoại trước khi mở. Nhấn 'X' hoặc nhấn 'Hủy' sẽ đóng hộp thoại mà không lưu. Kết thúc mục nhập của chúng tôi với <form> cho phép chúng tôi sử dụng Enter để gửi biểu mẫu hoặc nhấp vào 'Lưu'. Cả hai đều được định cấu hình để lưu giá trị trước khi đóng hộp thoại.

Tôi đã thêm chức năng đặt lại vào cuộc gọi lại gần, vì vậy bất cứ khi nào hộp thoại được đóng, nó sẽ xóa mọi dữ liệu cũ hơn. Điều này không thực sự cần thiết vì khi chúng ta mở hộp thoại, nó sẽ điền dữ liệu vào các trường.

Chúng tôi phải lưu trữ các giá trị ở đâu đó. Trong ví dụ này, tôi đang sử dụng thuộc tính data. Nó có thể được thêm vào như một phần của HTML và được đọc bởi jQuery. Nó không duy trì. Bạn có thể thấy nút lưu cuối cùng và nút này có thể đọc các giá trị mới và đẩy chúng vào localStorage hoặc cơ sở dữ liệu.

Hy vọng điều này sẽ giúp.

    
1
2019-05-08 21: 59: 28Z
  1. Có thể thử với bộ nhớ cục bộ không? hoặc bạn chỉ muốn thêm một số phần tử html?
    2019-05-08 23: 10: 02Z
  2. @ stanchacon không rõ ý định của OP là gì và anh ấy không nói rõ. Họ có thể đẩy dữ liệu đến một phiên, cơ sở dữ liệu, localStorage hoặc cookie. Điều đó thực sự tùy thuộc vào quyết định của OP.
    2019-05-08 23: 11: 00Z
  3. Ý tôi là Lưu trữ cục bộ là một tùy chọn tuyệt vời để lưu dữ liệu
    2019-05-08 23: 11: 51Z
  4. Cảm ơn @Twisty, giải pháp của bạn thực sự đã giúp tôinhiều.
    2019-05-09 19:20:59 Z
nguồn đặt đây