確認在使用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) 
} 

功能之一觸發此（我不知道什麼是三）：

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

最後他們setConfirmUnload(null);禁用它我假設。

我的情況很簡單。我有一個頁面，我通過AJAX加載<form />，我希望防止何時加載此表單以離開頁面而不點擊提交按鈕，或者如果用戶單擊取消，表單將被禁用，並且預防不會彈出。

有了這段代碼，有人能告訴我如何將它包含在我的網站上嗎？

這是我的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; 

而且，看到這樣的回答：How can I override the OnBeforeUnload dialog and replace it with my own?

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. 
}); 

您可以谷歌JQuery的形式序列化函數，這將收集所有表單輸入並將其保存在數組中。我想這解釋是不夠:)

Answer 3

我做了基於瓦西姆的出色答卷這個一般的功能：

var confirm_nav_ignore = []; 
function confirm_nav() { 
    function save_form_state($form) { 
     var old_state = $form.serialize(); 
     $form.data('old_state', old_state); 
    } 

    // On load, save form current state 
    $('form').each(function() { 
     save_form_state($(this)); 
    }); 

    // On submit, save form current state 
    $('form').submit(function() { 
     save_form_state($(this)); 
    }); 

    // strip fields that we should ignore 
    function strip(form_data) { 
     for (var i=0; i<confirm_nav_ignore.length; i++) { 
      var field = confirm_nav_ignore[i]; 
      form_data = form_data.replace(new RegExp("\\b"+field+"=[^&]*"), ''); 
     } 
     return form_data; 
    } 

    // Before unload, confirm navigation if any field has been edited 
    $(window).on('beforeunload', function(e) { 
     var rv; 
     $('form').each(function() { 
      var $form = $(this); 
      var old_state = strip($form.data('old_state')); 
      var new_state = strip($form.serialize()); 
      if (new_state != old_state) { 
       rv = ''; 
      } 
     }); 
     return rv; 
    }); 
} 

// I call it at the end of the on-load handler: 
$(function() { 
    confirm_nav(); 
}); 

變化：

1. 允許提交表單而無需確認。
2. 作品多種形式，使用$（「形式」）。每個（...）
3. 不依賴於形式在具有ID =「形式」
4. 返回'的定義確認消息，而不是在Chrome中顯示「true」的真實值。
5. 對於困難頁面，可以告訴忽略某些表單域。
6. 從加載處理程序的末端運行它...似乎是個好主意。
7. 它足夠通用，所以我們可以在網站的每個頁面上使用它。

它可能看起來過度設計，但這就是我必須要做的，以使其在真正的Web應用程序中正常工作。

感謝Wasim，因爲使用JQuery $（form）.serialize（）的好主意。