javascript - 当表单包含未保存的数据时警告用户，忽略数据表过滤字段

Question

我正在寻找一种方法来警告用户表单内有未保存的数据。如果用户导航到另一个站点或关闭浏览器，则应该出现警告。我发现this solution哪种作品。有时，如果浏览器关闭，它不会使用react。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {
        // Set the unload message whenever any input element get changed.
        $(':input').change(function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').submit(function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }
</script>

现在我有一个问题。我有一个<p:datatable>在我的页面上。每列都有一个过滤字段。由于该字段也是输入字段，因此如果过滤器字段中有某些内容，选择器也会匹配。是否可以避免选择器检查过滤器字段。

Answer 1

您要查找的选择器是 :input:not(.ui-column-filter) (数据表过滤器输入具有 ui-column-filter 类) 。您可以简单地在浏览器中检查这些字段并查看设置了哪些类。在 Chrome 中，右键单击字段并选择“检查”。

所以改变这一行:

$(':input').change(function() {

至:

$(':input:not(.ui-column-filter)').change(function() {

您可以在 JavaScript 控制台中测试这两个选择器并查看差异。

另请参阅:

• https://api.jquery.com/category/selectors/
• https://api.jquery.com/not-selector/

此外，您应该消除加载 jQuery 的脚本。 jQuery 与 PrimeFaces 捆绑在一起，并在您在页面上使用 PrimeFaces 组件时加载。 Multiple instances of jQuery will cause uncaught type errors .