Question

我有一个表单，我创建了一个模型，如果用户离开页面，我想要一个dialoge框，除非他们点击了保存/创建按钮。

我有这个javascript代码可以在用户离开页面的任何时候运行;这意味着当用户点击“保存/创建”时，此对话框仍会显示。

#javascripts/workouts.js.coffee
window.confirmExit = () ->
  "Your changes will not be saved.";

#workouts/new.html.haml
= render 'form'
:javascript
  window.onbeforeunload = confirmExit

#workouts_form.html.haml
= simple_form_for(@workout) do |f|
# some input fields
= f.button :submit

现在我知道如果没有点击submit按钮，我只想要确认退出，但我不知道该怎么做。

Answer 1

我通常做的是只在实际对表单进行更改时才显示确认。为此，您需要扫描页面上的表单，序列化它们并将其存储在内存中。然后，当用户离开页面时，再次序列化表单并查看是否存在差异。

否则，您可能希望绑定一些函数来提交表单事件，将一些全局布尔值设置为window.formSubmitted为true。离开页面时检查该变量，以确定是否要显示确认框。

Answer 2

所以我想出来了，至少它适用于铬和野生动物园，虽然现在我的印象是它不适用于ie。我所做的是创建一个设置为false的布尔值，并且仅在选择提交按钮时设置为true。

#javascripts/workouts.js.coffee
window.submitButtonClicked = false
window.confirmExit = () ->
  if window.submitButtonClicked
    null
  else
    "Your changes will not be saved."

$(document).ready ->
  $('#target').submit ->
    window.submitButtonClicked = true

#workouts/new.html.haml
:javascript
  window.onbeforeunload = confirmExit

#workouts_form.html.haml
#target
  = simple_form_for(@workout) do |f|
    # some input fields
    = f.button :submit

我希望这可以帮助任何好奇的人。请注意，#target行是实际haml而不是注释。

确认离开页面，除非他们单击了保存按钮

2 个答案: