警告按钮，用于拖放表行而不显示保存

Question

我有一个表，我已经排序(行可以使用jquery拖放)，我想，如果用户拖放行，忘记点击更新按钮，并试图导航到其他页面，然后一个警告应该出现询问'如果你想在离开之前保存'。

下面是我的代码，使其可排序。

$(function () {
$("#tbllookup1 tbody").sortable({
items: 'tr',
cursor: 'pointer',
axis: 'y',
droponempty: false,
start: function (e, ui) {
ui.item.addclass("selected");

},
stop: function (e, ui) {
ui.item.removeclass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
});

根据某人在stackoverflow上的建议，我尝试设置一个标志并使用beforeunload，但不确定为什么没有显示警报。

下面是修改后的代码…

$(function () {
// set the flag on drop
let $tbody = $("#tblLookup1 tbody").sortable({
// ... settings
receive: function (e, ui) {
$tbody.data('is-dirty', true).find("tbody").append(ui.item);
}
});

// remove the flag when submitting the form through the update button
$('#tblLookup1').on('submit', () => $tbody.data('is-dirty', false));
// check the flag when the user leaves the page and display 
// a message if it's set
window.addEventListener('beforeunload', () => {
if ($tbody.data('is-dirty')) {
return 'Do you want to save the data before leaving?';
}
});
alert(is - dirty);
});

我还尝试了另一件事

var formSubmitting = false;
var setFormSubmitting = function () { formSubmitting = true; };
window.onload = function () {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; 
return confirmationMessage; 
});

这确实显示了一个警告，但警告消息是默认的，而不是我提供的，这个警告也不与我的拖放行绑定，但每次我试图导航到不同的链接时都会出现。

我的按钮

<input type="submit" class="btn CreateButtonColor" id="btnSave" value="Update" onclick="myFunction()" />

我该怎么做才能使它工作呢?

Answer 1

考虑以下内容:

$(function() {
$("#tbllookup1 tbody").sortable({
items: '> tr',
cursor: 'pointer',
axis: 'y',
droponempty: false,
start: function(e, ui) {
ui.item.addClass("ui-state-highlight");
},
stop: function(e, ui) {
ui.item.removeClass("ui-state-highlight");
$(this).data("saved", false);
},
receive: function(e, ui) {
$(this).append(ui.item);
}
});
$("#tbllookup1-save-btn").click(function() {
// Save new Order to DB
$("#tbllookup1 tbody").data("saved", true);
})
$(window).on("beforeunload", function(event) {
// Custom messages are gerneally not supported by modern browsers.
event.preventDefault();
if ($("#tbllookup1 tbody").data("saved") == false) {
return event.returnValue = "You have unsaved changes, are you sure you want to navigate away?";
}
return true;
});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<table id="tbllookup1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Active</th>
</tr>
</thead>
<tbody data-saved="true">
<tr>
<td>1001</td>
<td>Homer Simpson</td>
<td>Yes</td>
</tr>
<tr>
<td>1020</td>
<td>Marge Simpson</td>
<td>Yes</td>
</tr>
<tr>
<td>1031</td>
<td>Bart Simpson</td>
<td>Yes</td>
</tr>
<tr>
<td>1089</td>
<td>Lisa Simpson</td>
<td>Yes</td>
</tr>
<tr>
<td>1111</td>
<td>Maggie Simpson</td>
<td>No</td>
</tr>
</tbody>
</table>
<button id="tbllookup1-save-btn">Save Changes</button>
<a href="https://www.google.com/">Trigger unload</a>

这里有很多值得看的东西。请参阅items页面:

https://api.jqueryui.com/sortable/option-items

类型:选择器,默认值:"> *"，指定元素中的哪些项是可排序的。

调用.addClass().removeClass()。如果函数名不正确，它们将抛出一个错误。

您可以调用beforeunload，但现代浏览器不允许自定义文本作为安全预防措施。用户仍然会收到一个通知和一个选择。

使用data属性是存储状态的好方法。当页面加载时，我们假设详细信息已经保存，true。当进行更改时，我们可以更改保存到false。如果用户保存，我们可以将状态更改回true。