javascript - 在关闭页面之前提醒用户页面上未保存的更改。Rails 6. 更新

Question

更新为使用更智能的实现（或至少更简洁）。这将使大多数评论变得无关紧要，但感谢您的评论。

如何在关闭页面之前提醒用户页面上未保存的更改。导轨 6。

AreYouSure通过添加yarn add areyousure。

相关在application.js

import 'jquery';
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;
import 'areyousure/areyousure.js';

在/edit.html.erb，data-areyousure添加到 div 周围的形式

<div class="row">
  <div class="col-md-6 col-md-offset-3" data-areyousure >
    <%= render 'form' %>
  </div>
</div>

这甚至不允许对表单进行任何更改。只要您在表单中单击，编辑页面就会更新为Are you sure? Yes | No。不是弹窗。

在github页面上没有看到太多活动。

演示（ github 上的链接已失效）。也尝试过脏表格。有其他问题。好像我和 AreYouSure 更亲近了

Answer 1

看起来您的目标是div围绕表单的容器，而不是表单本身。尝试附加areyousure到表单对象：

<% provide(:title, 'Edit Person') %>
<h1>Edit: <%= @person.full_name %></h1>

<script>
  $(function() {
    $('#person_edit_form form').areyousure(
      {
        message: 'It looks like you have been editing something. '
               + 'If you leave before saving, your changes will be lost.'
      }
    );
  });
</script>

<div class="row">
  <div class="col-md-6 col-md-offset-3" id="person_edit_form">
    <!-- !render bookmark -->
    <%= render 'form' %>
  </div>
</div>