<p:blockUI> не реагирует на <ч: 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 pfAjaxSend и pfAjaxComplete событий. Эти события запускаются всеми компонентами ajax PrimeFaces, но не стандартным JSF <f:ajax>.

Вы имеете 3 варианта:

1. Заменить <f:ajax> на <p:ajax> позволить <h:commandButton> отправить запрос Ajax PF/JQuery вместо стандартного JSF один.

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

   (примечание: внимательно прочитайте Differences between action and actionListener)

   ---

2. Приложить глобальный слушатель <f:ajax>, который автоматически запускает в/JQuery-специфические события PF.

   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 является наиболее простым выбором.

Answer 2

Попробуйте p: commandlink Вместо этого. У меня была та же проблема для h: commandlink и ее решение