警告用户JSF中未保存的数据 [英] Warn user of unsaved data in JSF
问题描述
我想警告用户任何形式的未保存数据,然后他/她单击链接以导航到当前页面,而不进行保存. 什么是在JSF中实现此目的的更好方法,以便对所有页面都在一个位置进行此检查. 任何建议表示赞赏.
I want to warn user of any unsaved data in a form before he/she clicks on a link to navigate away from the current page, without saving. What would be a better approach to achieve this in JSF, so that this check is done at one single place for all pages. Any suggestions are appreciated.
推荐答案
标准的JSF实现并没有为此提供便利.此外,这比服务器问题更像是客户端问题,因此您确实需要为此获取一种客户端语言,例如JavaScript.由于针对此特定功能要求编写与跨浏览器兼容的JavaScript代码并不是一件容易的事,因此您想为此使用JavaScript库,例如 jQuery .
The standard JSF implementation doesn't provide facilities for this out the box. Besides, this is more a client side issue than a server side issue, so you'll really need to grab a client side language for this such as JavaScript. Since writing crossbrowser compatible JavaScript code for this particular functional requirement isn't exactly trivial, you'd like to use a JavaScript library for this which takes this into account, like jQuery.
这是一个完整的启动示例,说明如何在jQuery的帮助下实现这一目标.
Here's a complete kickoff example of how you could achieve this with help of jQuery.
<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>
只需将其粘贴到您的<head>
模板中(最好还将原始的<script>
代码也重构到自己的.js
文件中,并通过src
属性将其包含在内),并且无论页面如何,它都可以工作你有.
Just paste this in your <head>
template (and preferably also refactor that raw <script>
code into its own .js
file as well which you include by src
attribute) and it'll work regardless of the page you have.
这篇关于警告用户JSF中未保存的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!