<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>

和a

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

它不起作用.该块永远不会显示出来.

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

我怎样才能实现它<h:commandbutton>.如果那是不可能的:有没有解决方法？

Answer 1

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

你有3个选择:

1. 代替<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之间的差异)

2. 附加一个全局侦听器,在<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]);
       }
   });
   

   但是,可能会有一些不良的副作用.

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