<p：blockUI>在<h：commandButton> <f：ajax>上不响应

Alexander 发表于 Dev

亚历山大

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

BalusC

在<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>
```
（注意：请仔细阅读action和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]);
    }
});

但是，可能会有一些不希望有的副作用。

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

<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是最直接的选择。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。