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

Question

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

如何在关闭页面之前提醒用户注意页面上未保存的更改。 Rails 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 页面上没有看到太多活动。

Demo (link 在 github 上已经死了）。也试过dirtyforms。有其他问题。看来我和 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>