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

Warn user when form contains unsaved data, ignoring data table filter fields

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

<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>。每列都有一个过滤字段。由于此字段也是输入字段,因此如果过滤器字段中有内容,选择器也会匹配。 是否可以避免选择器检查过滤字段。

你可以写一个更具体的选择器来代替 $(':input') 如果数据表不在表单标签内,您可以执行类似 $('form :input') 的操作。或者您可以使用 .not() 方法来排除特定元素。

您正在寻找的 select 或者是 :input:not(.ui-column-filter)(数据 table 过滤器输入有一个 ui-column-filter class)。您可以简单地检查浏览器中的这些字段并查看设置了哪些 classes。在 Chrome 中右键单击一个字段并 select "Inspect".

所以改变这一行:

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

至:

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

您可以在 JavaScript 控制台中同时测试 select 或两者,看看有什么不同。

另请参阅:

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