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

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

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?

Solution

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:

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)

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.

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.