如何使 p:commandButton 提交表单（未调用 JavaScript 提交操作）答案

【问题标题】：How to make a p:commandButton submit a form (JavaScript submit action not called)如何使 p:commandButton 提交表单（未调用 JavaScript 提交操作）
【发布时间】：2017-05-31 08:15:25
【问题描述】：

我正在使用 primefaces 开发几个 GUI，我想在离开网站之前警告用户。我在这里找到了一个完美的解决方案： How to detect unsaved data in form when user leaves the page? 这是我正在使用的 JavaScript 代码（在链接中找到）

$(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() {
        alert('I am here');
        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;
}

我的问题是我的 primefaces 保存按钮是 ajax 并且不调用“提交”操作。并且用户将在保存页面后被提醒他将离开网站。 commandButton的代码如下：

<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right">     </p:commandButton>

我尝试在 ajax 调用中添加“执行表单”：

<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right">
<p:ajax execute="@form"> 
</p:commandButton>

但它也没有工作。如果按钮设置为 $ajax="false"$ 一切正常，但我想避免它。任何人都可以帮忙吗？非常感谢！

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

在你的脚本中添加这个function。

function save(){
    alert('I am here');
    setConfirmUnload(true);
}

在你的命令按钮中插入onclick="save();"

【讨论】：

那不是很干。
我正在寻找一个 jsf/primefaces 解决方案，如果有的话。如果不是，您的答案可能是解决方案！
@lug：jsf 和 PrimeFaces 的一个方面是它们生成 html。因此，它是一个 jsf/PrimeFaces 解决方案非常有效。
@JasperDeVries：我在考虑你的“DRY”评论，但出于某种原因，我所能想到的只是向组件添加一个特定的类并基于它创建一个事件监听器，但是这几乎是一样的。有什么想法吗？
@JasperdeVries：是的，但是如果您在一个页面上有多个执行不同操作的表单，那么标志/信号量可能会被不正当地清除。因此，明确地将其添加到您知道实际“保存”更明确的命令按钮中。当您将所有这些包装在您自己的组件中时，“干”方面会减少

【解决方案2】：

难道不能给你的按钮附加属性 type="submit" 吗？不知道这是否适用于primefaces，但适用于其他框架:)

【讨论】：

在使用 ajax 向服务器发送值时，并非所有“其他框架”都调用“提交”。但是您可以（与所有 html 一样）使用“onclick”javascript 事件处理程序或类似事件处理程序。这样很容易解决
@lug 另一种解决方案可能是使用“标准”jsf，例如：<h:commandButton value="Save" id="saveButton" type="submit" action="#{myView.save}" styleClass="yourClass"> <f:ajax execute="@form" render="description name"> </h:commandButton>