<p:blockUI> 未响应 <h:commandButton><f:ajax>

Question

我有一个 <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> 实现它。如果那不可能：是否有任何解决方法？

Answer 1

<p:blockUI> 仅侦听 PrimeFaces/jQuery-specific 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 是最直接的选择。

Answer 2

请尝试 p:commandlink。我在 h:commandlink 遇到了同样的问题并解决了

<p:blockUI> 未响应 <h:commandButton><f:ajax>

<p:blockUI> does not respond on <h:commandButton><f:ajax>

blockui

primefaces

jsf-2

commandbutton