当表单包含未保存的数据时警告用户,忽略数据 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.
我正在寻找一种方法来警告用户表单内有未保存的数据。 如果用户导航到另一个站点或关闭浏览器,则应该出现警告。 我找到了 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.