<p:blockUI> 对 <h:commandButton><f:ajax> 没有响应答案

【问题标题】：<p:blockUI> does not respond on <h:commandButton><f:ajax><p:blockUI> 对 <h:commandButton><f:ajax> 没有响应
【发布时间】：2015-06-23 08:44:04
【问题描述】：

我有一个<h:commandButton 喜欢：

<h:commandButton id="login"
  actionListener="#{bean.login}" value="Login"
  styleClass="btn btn-primary btn-sm">
   <f:ajax execute="@form" render="@form"/>
</h:commandButton>

还有一个

<p:blockUI id="block" block=":form" trigger="login" />

它不工作。该块永远不会出现。

它确实适用于<p:commandButton>。

如何使用<h:commandbutton> 实现它。如果这不可能：有什么解决方法吗？

【问题讨论】：

你试过h:commandButton和p:ajax吗？
哦，我错过了你的评论。请参阅已接受的答案。 :)
是的，我已经注意到了。 ;-)

标签： jsf-2 primefaces commandbutton blockui

【解决方案1】：

<p:blockUI> 仅侦听 PrimeFaces/jQuery 特定的 pfAjaxSend 和 pfAjaxComplete 事件。这些事件由所有 PrimeFaces ajax 组件触发，但不是由标准 JSF <f:ajax> 触发。

您有 3 个选择：

将<f:ajax> 替换为<p:ajax>，让<h:commandButton> 发送一个PF/jQuery ajax 请求，而不是标准的JSF 请求。
```
<h:commandButton id="login" value="Login" action="#{bean.login}">
    <p:ajax process="@form" update="@form" />
</h:commandButton>
```
（注意：仔细阅读Differences between action and actionListener）

在 <f:ajax> 上附加一个全局监听器，它会自动触发 PF/jQuery 特定的事件。

jsf.ajax.addOnEvent(function(data) {
    if (data.status === "begin") {
        $(document).trigger("pfAjaxSend", [null, data]);
    }
    else if (data.status === "success") {
        $(document).trigger("pfAjaxComplete", [null, data]);
    }
});

不过，可能会有一些不良副作用。

在<f:ajax> 事件期间手动触发特定的<p:blockUI>。

<f:ajax ... onevent="triggerBlockUI" />
...
<p:blockUI widgetVar="widgetBlockUI" ... />

有了这个JS函数。

function triggerBlockUI(data) {
    if (data.status === "begin") {
        PF("widgetBlockUI").show();
    }
    else if (data.status === "success") {
        PF("widgetBlockUI").hide();
    }
}

不用说选项 1 是最直接的选择。

【讨论】：

【解决方案2】：

尝试使用 p:commandlink 代替。我对 h:commandlink 有同样的问题并解决了

【讨论】：