在AJAX調用期間更換表單時，如何警告用戶未更改表單的更改？

我是Javascript和JQuery的新手，我正在實現一個警告，告訴用戶當他們已經做出未保存的表單的輸入/ select/textarea元素的變化時顯示，如果他們離開一個頁面。我現在有當他們離開一個靜態的表單頁面工作正常的情況如下：在AJAX調用期間更換表單時，如何警告用戶未更改表單的更改？

/* 
* Warn users when leaving a page with unsaved content, watches elements: (input, textarea, select) unless 
* they are tagged with the "noWarning" class 
*/ 
$(document).ready(function() { 
    $(document).on('change', 'input:not(.noWarning),textarea:not(.noWarning),select:not(.noWarning)', function() { 
     window.onbeforeunload = function(e) { 
       return 'You have unsaved changes'; 
     }; 
    }); 
});

唯一的頁面，這是行不通的，是在我們的主編輯頁面。與其他人不同的是，此頁面有多個選項卡，用於編輯項目的不同方面，當點擊該選項時，將觸發AJAX調用，該調用會以適當的格式替換內容div以編輯不同的方面。

當用戶單擊某個選項卡時，不會顯示任何警告對話框，因此任何未保存的對輸入的更改都會丟失。

我的直覺是因爲url沒有改變，onBeforeUnload（）沒有執行。所以，我必須直接在處理AJAX調用替換形式的功能檢查是否有任何變化被點擊選項卡時：

function clickedTabbedMenu() { 
    // This function replaces the content div with a new div and form 
}

所以我的問題是，我怎麼去檢查，如果任何變動在我用另一個替換內容div之前，已經對當前表單中的元素進行了修改？我可以直接調用「更改」事件偵聽器的真/假？或者，也許處理此頁面的警告消息的一種不同的方法？

任何幫助理解

來源

2014-10-20 Christian

如果你正在尋找這引起了onbeforeunload事件時所做的Ajax調用那麼它幾乎是不可能的解決方案。在進行Ajax調用時，您需要有自己的實現來檢測更改。 – Mihir 2014-10-20 16:53:05

這是沒有必要調用onbeforeunload ....我想更多的沿線，當我調用該選項卡上的功能來切換窗體，查詢當前加載的窗體爲「有用戶對任何元素進行了更改？「如果是，則顯示是否繼續的提示，否則，只需繼續替換表格 – Christian 2014-10-20 17:01:10

附上change事件處理程序的形式的所有元素。當處理程序的範圍dirty（或甚至在form元素上）有一個變量被設置爲false當一個窗體被加載，並true每change事件。然後，在更換表格之前，檢查是否dirty。

這也將是你的非AJAX頁面一個很好的策略，以及 - 而不是整個onBeforeUnload每次一個元素的變化，只需設置一次onBeforeUnload設置，並檢查是否dirty裏面。這使得處理您的AJAX和非AJAX頁面非常相似。

編輯：未經測試的，因爲它是晚，我需要睡覺，但基本上：

$(document).ready(function() { 
    var dirty = false; 
    $(document).on('change', 'input:not(.noWarning),textarea:not(.noWarning),select:not(.noWarning)', function() { 
     dirty = true; 
    }); 
    function checkDirty() { 
      if (dirty) { 
       alert('You have unsaved changes'); 
       return false; 
      } 
      return true; 
    } 
    // for non-AJAX pages 
    window.onbeforeunload = function(e) { 
     return checkDirty(); 
    }; 
    // for AJAX pages 
    $('.ajax_navigation_tab').on('click', function() { 
     if (!checkDirty()) { 
      // do the ajax thing 
      dirty = false; 
     } 
    }); 
});

來源

2014-10-20 16:49:10 Amadan

您可以解釋一下這個更深入一點嗎？這與第一個$ document.on（'change'....）函數的作用不同 – Christian 2014-10-20 17:03:03

感謝您的幫助 – Christian 2014-10-24 18:26:50

我會嘗試檢查，並要求在您的AJAX腳本window.onbeforeunload（）。

如果它存在，並返回一個字符串，使用它作爲一個錯誤消息，並且停止運行:)

來源

2014-10-20 16:58:37

在AJAX調用期間更換表單時，如何警告用戶未更改表單的更改？

回答

相關問題