p: blockUI/pe: blockUI: Почему он не работает на моем простом примере?

Question

Я хотел бы скрыть элемент, пока кнопка срабатывает действие выполняется:

<h:form id="sendtxform"> 
     <p:panelGrid columns="1" styleClass="ui-noborder">  
      <pe:blockUI block="input" widgetVar="blockUIWidget"> 
      LOADING<br /> 
       <p:graphicImage name="images/ajax-loader.gif" /> 
      </pe:blockUI> 

      <p:commandButton id="command" value="ISSUE APP" 
       actionListener="#{transactionXmlController.getTxDataPredefined}" 
       ajax="true" update="growl,input" 
       onstart="PF('blockUIWidget').block();" 
       oncomplete="PF('blockUIWidget').unblock();"> 
      </p:commandButton> 

      <p:inputTextarea id="input" cols="150" rows="30" autoResize="false" 
       value="#{transactionXmlEditableModel.xml}" /> 
     </p:panelGrid> 
    </h:form> 

Я попытался с р: blockUI/ре: blockUI и с/без OnStart и OnComplete атрибутов.

Что я делаю неправильно? Я использую blockUI где-то еще, и он работает нормально: Единственное отличие состоит в том, что таблица является его собственным триггером.

Я следовал this учебник.

Answer 1

Блокировать вход кажется неработоспособным, вы можете обернуть его с помощью панели и заблокировать ее.

PrimeFaces Расширения:

<h:form id="sendtxform"> 
    <p:panelGrid columns="1" styleClass="ui-noborder"> 
     <pe:blockUI target="panel" widgetVar="blockUIWidget"> 
     LOADING<br /> 
      <p:graphicImage name="images/ajax-loader.gif" /> 
     </pe:blockUI> 

     <p:commandButton id="command" value="ISSUE APP" 
      actionListener="#{transactionXmlController.getTxDataPredefined}" 
      ajax="true" update="input" 
      onstart="PF('blockUIWidget').block();" 
      oncomplete="PF('blockUIWidget').unblock();"> 
     </p:commandButton> 

     <p:panel id="panel"> 
      <p:inputTextarea id="input" cols="150" rows="30" autoResize="false" 
      value="#{transactionXmlEditableModel.xml}" /> 
     </p:panel> 
    </p:panelGrid> 
</h:form> 

PrimeFaces:

<h:form id="sendtxform"> 
    <p:panelGrid columns="1" styleClass="ui-noborder"> 
     <p:blockUI block="panel" trigger="command"> 
     LOADING<br /> 
      <p:graphicImage name="images/ajax-loader.gif" /> 
     </p:blockUI> 

     <p:commandButton id="command" value="ISSUE APP" 
      actionListener="#{transactionXmlController.getTxDataPredefined}" 
      ajax="true" update="input"> 
     </p:commandButton> 

     <p:panel id="panel"> 
      <p:inputTextarea id="input" cols="150" rows="30" autoResize="false" 
      value="#{transactionXmlEditableModel.xml}" /> 
     </p:panel> 
    </p:panelGrid> 
</h:form>