jquery beforeunload提交表单

时间:2012-07-01 14:11:33

标签: javascript ajax jquery

我有一个form.edit_recipe,我的目的是让这个表单在页面卸载之前成功保存(如果有新数据),而不会提示用户。

这是JQ的关键部分:

    $(document).ready(function() {
      $(window).bind('beforeunload', function() {
        if (auto_save_timer) {  // auto_save_timer == true means there are changes
          $("#auto_save_overlay").css('display', 'block');  // shows a spinner
          $(".edit_recipe").submit();
        }
      });
    });

点击指向下一页的链接时,即使在相同的情况和数据集中,有时候更改会保存,有时也不会保存。

我99%肯定我的其他变量和页面上的JQ没有影响这一点,但如果需要,我可以使用更多代码示例进行更新。

我迷路了或问题是什么,但我觉得这与下一页加载中断的表单数据有关。

有什么建议吗?

编辑: 感谢您的建议到目前为止。我想我应该留意@ see163的建议,也许会考虑强迫用户手动按下保存按钮,如果有未保存的更改,只需添加alert()。这是一种更正统的方法吗?如果.beforeunload在Opera和Chrome中是垃圾,我应该使用哪些JQuery事件/操作来跨浏览器?

2 个答案:

答案 0 :(得分:1)

卸载和beforeunload有时无法在Opera中工作,有时也会在chrome中工作。

小心。

答案 1 :(得分:0)

您可以在每个链接上执行以下操作:

<a href="javascript:submitForm('URL HERE')">............</a>

然后在你的js做:

    function submitForm(url){
       if (auto_save_timer) {
          $("#auto_save_overlay").css('display', 'block');
          $(".edit_recipe").submit();
          window.location = url;
        }
    }