p: blockUI/pe: blockUI: Warum funktioniert es nicht in meinem einfachen Beispiel?

Question

Ich möchte ein Element verbergen, während eine Schaltfläche Aktion ausgelöst ausgeführt wird:

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

Ich habe versucht, mit p: BlockUI/pe: BlockUI und mit/ohne onstart und onComplete Attribute.

Was mache ich falsch? Ich benutze blockUI woanders, und es funktioniert gut: Der einzige Unterschied ist, dass die Tabelle einen eigenen Trigger ist.

Ich folgte this Tutorial.

Answer 1

Blockieren Sie die Eingabe scheint nicht zu funktionieren, können Sie die Eingabe mit einem Panel umwickeln und blockieren. Extensions

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>