使用jQuery编辑表单时确认离开页面

Question

我正在编写一个表单,我需要像stackoverflow这样的函数:"你已经开始编写或编辑帖子了."

我已经查看了stackoverflow的代码,看看他们是如何做到这一点的,但我根本没有把它应用到我的简单表单中.这就是他们对question.js的看法:

function initNavPrevention(b) {
    if (b.which == "undefined") {
        return
    }
    var a = $("#wmd-input");
    a.unbind("keypress", initNavPrevention);
    setConfirmUnload("You have started writing or editing a post.", a)
}

其中一个函数触发了这个(我不知道c是什么):

if (c) {
    e.keypress(initNavPrevention)
}

最后他们必须setConfirmUnload(null);禁用它我想.

我的情况很简单.我有一个页面,我加载了一个<form />通过AJAX,我想阻止加载此表单离开页面而不点击SUBMIT按钮或如果用户单击取消,表单被禁用,预防将不会弹出.

拥有此代码,有人可以告诉我如何将其包含在我的网站上吗？

这是我加载表单的AJAX函数:

$("#projects_historics_edit_part_1").click(function(){
    $("#ajax-loader").fadeIn('normal');

    $.ajax({
        url: BASE_URL + 'projects/ajax/get_historics_edit_part_1/' + PROJECT_ID,
        type: "POST",
        success: function(data) {
            $("div#projects_historics_part_1").html(data);

            $("#client").autocomplete(client_autcomplete_options);

            var inicofin = $("#initdate, #findate").datepicker(initdate_datepicker_options);
        }
    });

    $("#ajax-loader").fadeOut("normal");

    return false;    
});

先感谢您!

Answer 1

您可以这样使用window.onbeforeunload:

window.onbeforeunload = function() {
    return 'Are you sure you want to navigate away from this page?';
};

所以在你的代码中,你会把它放在success你的$.ajax调用回调中.

要取消确认,您可以这样做:

window.onbeforeunload = null;

另外,请参阅以下答案:如何覆盖OnBeforeUnload对话框并将其替换为我自己的对话框？

Answer 2

这就是JQuery中的方法

$('#form').data('serialize',$('#form').serialize());
  // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null;
    // i.e; if form state change show box not.
});

您可以使用Google JQuery Form Serialize功能,这将收集所有表单输入并将其保存在数组中.我想这个解释就够了:)