jsf - 用户离开页面时如何检测表单中未保存的数据？

Question

当用户离开页面而不提交表单时，我需要检测表单中未保存的数据。我想在不为每个输入添加值更改监听器的情况下实现它。

这是功能要求:

"User open a page than click on any link if values in the page changed an alert message popup to notify user that he need to save changed data, but if did not change any thing system continue without notify user".

我尝试比较数组方法来比较 DB 的 DTO 和绑定(bind) DTO，但它在数组长度和字节比较方面给我带来了很多问题。

Answer 1

这通常在 JavaScript 的帮助下在客户端实现，因为在 beforeunload 上拦截不太可能。最终用户离开页面时来自服务器端的事件。

这是一个借助 JavaScript 库 jQuery 的具体示例(否则你最终会得到 10 倍的代码，以使其正确跨浏览器兼容并与 ajax 重新渲染无缝协作):

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

        // Turn off the unload message whenever a form get submitted properly.
        $('form').on('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>

只需将其粘贴到您的 <h:head>模板或只是把它放在一些 script.js您包含的文件 <h:outputScript> .