Question

我正在寻找一种方法来警告用户表单内部是未保存的数据。如果用户导航到其他站点或关闭浏览器，则会出现警告。我发现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>。每列都有一个过滤字段。由于此字段也是输入字段，因此如果某些内容位于过滤器字段中，则选择器也会匹配。是否可以避免选择器检查过滤器字段。

Answer 1

您可以编写更具体的选择器而不是$(':input') 如果数据表不在表单标记内，您可以执行$('form :input')之类的操作。或者，您可以使用.not()方法排除特定元素。

Answer 2

您要查找的选择器是:input:not(.ui-column-filter)（数据表过滤器输入具有ui-column-filter类）。您只需在浏览器中检查这些字段，然后查看设置的类。在Chrome中右键单击某个字段，然后选择＆＃34;检查＆＃34;。

所以改变这一行：

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

为：

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

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

另见：

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

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

2 个答案: