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

Question

I got a <h:commandButton like:

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

and a

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

It is not working. The block is never shown up.

It does work with a <p:commandButton>.

How can I achieve it with a <h:commandbutton>. If that is not possible: Is there any workaround?

Deflation

Did you try an h:commandButton with p:ajax? – Feller

Oh, I missed your comment. See the accepted answer. :) – Deflation

Yes, I already noticed. ;-) – Feller

Answer 1

The <p:blockUI> listens on PrimeFaces/jQuery-specific pfAjaxSend and pfAjaxComplete events only. Those events are triggered by all PrimeFaces ajax components, but not by standard JSF <f:ajax>.

You've 3 options:

1. Replace <f:ajax> by <p:ajax> to let the <h:commandButton> send a PF/jQuery ajax request instead of a standard JSF one.

   <h:commandButton id="login" value="Login" action="#{bean.login}">
       <p:ajax process="@form" update="@form" />
   </h:commandButton>
   

   (note: carefully read Differences between action and actionListener)

   ---

2. Attach a global listener on <f:ajax> which auto-triggers the PF/jQuery-specific events.

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

   Might have some undesired side-effects, though.

   ---

3. Manually trigger a specific <p:blockUI> during <f:ajax> events.

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

   With this JS function.

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

   ---

Needless to say that option 1 is the most straightforward choice.

Conferva

Answer 2

Try p:commandlink Instead. I had the same problem for h:commandlink and its solved

Cumulate