如何放置警报，如果行被拖放并掉落并未单击更新按钮？

Question

我有一个表，其行是使用可排序属性拖动的，如下所述。

<script type="text/javascript">
    $(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);
            }
        });
    });

    
</script>

现在，一旦拖动行，我创建了一个更新按钮，该按钮用于将新订单更新为数据库。

<input type="submit" class="btn CreateButtonColor" id="btnSave" value="Update"/>

现在，我希望有一个警报，如果用户拖动并丢弃行和忘记以单击更新，则如何发出警告，以便用户在不保存的情况下不能导航到其他页面？

警告像下面的那样，

if (confirm('Do you want to save the data before leaving?')) {
  // Update code
}
else
{
// do nothing
}

我应该在何处放置上述代码块？

Answer 1

要执行您需要的事情，请在掉落东西时在桌子上设置标志。当用户尝试离开页面时，您可以检查是否设置了该标志并显示警告：

$(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
  $('#yourForm').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?';
    }
  });
});