Question

我的项目中有一条警告消息，我们警告最终用户，如果他们正在关闭窗口，然后再保存他们填写的表单。它工作正常但即使他们保存表单并尝试退出也会触发。我希望只有用户在保存表单之前尝试退出时才会弹出此警告消息。我该怎么做呢？

下面是弹出警告信息的代码。

jQuery(window).bind('beforeunload', function (e) {

    var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?";
    e.returnValue = message;
    return message;

}）;

这是我的保存功能

save: function (e) {
        e.preventDefault();

        var that = this;

        that.Height = that.HeightFeet * 12 + that.HeightInches;
        that.UrinationFrequencyMinutes = that.UrinationFrequencyHours * 60 + that.UrinationFrequencyMins;

        var modelData = kendo.stringify(that);

        $.ajax({
            type: "POST",
            url: constants.serviceUrl + "Form/Create/",
            data: modelData,
            dataType: "json",
            contentType: "application/json; charset=utf8",
            beforeSend: function (xhr) {
                $("#loadingBackground").show();
                $("#loaderContainer").show();
            }
        })
        .success(function (e) {
            var test = e;
            that.set("SaveCompleted", true);
            that.set("SaveSucceeded", true);
        })
        .fail(function (e) {
            var test = e;
            that.set("SaveCompleted", true);
            that.set("SaveSucceeded", false);
        })
        .done(function (e) {
            var test = e;
            $("#loadingBackground").hide();
            $("#loaderContainer").hide();
        });

    },

帮助表示感谢！：）

Answer 1

当用户保存表单时，将变量“saved”设置为“true”，并在显示错误消息之前检查此变量。

Answer 2

你需要某种脏标志（并检查它onbeforeunload）。

一个非常基本的例子：

(function(window,$,undefined){
  var hasUnsavedChanges = false,
      $form = $('form'),
      $status = $('#form-status');
  
  $form.find(':input').on('keypress change',function(){
    hasUnsavedChanges = true;
    $status.text('Unsaved Changes');
  }).end()
  .on('submit',function(){
    hasUnsavedChanges = false;
    $status.text('Changes Saved.');
    return false;
  });
  $(window).on('beforeunload',function(){
    if (hasUnsavedChanges){
      return 'Save your work first!'
    }
  });
})(window,jQuery);

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-8">
    <h3>Your Profile</h3>
    <form>
      <div class="form-group">
       <label for="name">Name</label>
       <input type="text" class="form-control" placeholder="Your name"/>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" placeholder="Your Email"/>
      </div>
      <button type="submit" class="btn btn-default">Save</button>
      <span id="form-status"></span>
    </form>
  </div>
  <div class="col-xs-4">
    <h4>Favorite Links</h4>
    <ul class="list-group">
      <li class="list-group-item">
        <a href="http://StackOverflow.com/">StackOverflow</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

在保存成功时将全局变量is_saved设置为true，并在更改表单中的内容后立即将其还原为false。

这样您就可以检查信息是否已经保存。

Answer 4

最简单的解决方案是在保存时设置一个变量，例如isSaved到true，然后在显示警告之前检查它。

更好的方法是检查是否有任何表单字段已被修改，因此当没有任何更改时（不要浪费往返服务器/），不会提示用户保存数据库只保存完全相同的记录）。您可以通过在$（document）.ready（）中缓存每个表单域的值来实现。然后，在beforeunload中，除了检查isSaved之外，您还可以检查表单字段的各个值，以查看它们是否与缓存的值不同。

Answer 5

使用类似isSaved的变量

    jQuery(window).bind('beforeunload', function (e) {
     if(isSaved){
        var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?";
        e.returnValue = message;
        return message;
}
    });

如何检查函数是否被触发jquery

5 个答案: