Aktualisieren des Renderings eines Elements von einem anderen Element in JSF

Question

In einer xhtml-Seite mit Primefaces möchte ich ein Tick-Icon mit FontAwesome-Icon (fa-check) anzeigen lassen. Da das Symbolattribut beispielsweise zu einer Schaltfläche "Hauptflächen" oder einer Befehlsschaltfläche "Hauptfläche" hinzugefügt werden kann, verwende ich eine Befehlsschaltfläche mit einem Symbolattribut. Mein Problem ist, wenn ich es von einem anderen Element mit f beziehen: Ajax machen, gibt es einen Fehler:

malformedXML: During update formId:tickIcon not found

Ich weiß, dass es bereits diese Art von Fragen waren, aber ich habe tragen nicht ab das Problem lösen.

Hier sind die relevanten Teile meiner xhtml Seite:

<h:form id="formId" enctype="multipart/form-data"> 
     <p:wizard> 
      <p:tab id="tab1"> 
      ... 
      </p:tab> 
      <p:tab id="tab2"> 
      <p:panel> 
       <p:panelGrid styleClass="ui-panelgrid-blank"> 
       <p:row> 
        <p:column colspan="2"> 
        <p:outputLabel id="wrapperLabel" value="Select a file" 
        styleClass="wrapperLabel"> 
         <h:inputFile id="fileUpload" styleClass="fileUploadButton" 
         value="#{bean.file}" required="true"> 
         <f:ajax listener="#{bean.tempUpload()}" 
         render="showFileName createButton tickIcon" /> 
         </h:inputFile> 
        </p:outputLabel> 
       </p:column> 
       <p:column colspan="1"> 
        <p:outputLabel value="Filename: " /> 
       </p:column> 
       <p:column colspan="5"> 
        <p:inputText id="showFileName" 
        value="#{bean.fileName}" readonly="true" /> 
       </p:column> 
       <p:column colspan="1"> 
        <p:commandButton id="tickIcon" icon="fa fa-check" 
        disabled="true" styleClass="tickIcon" 
        rendered="#{bean.validFile}" /> 
       </p:column> 
       </p:row> 
      </p:panelGrid> 
     </p:panel> 
     </p:tab> 
    </p:wizard> 
</h:form> 

Konkretere von der h: inputfile gibt es ein f: Ajax, und wenn die Datei-Upload durchgeführt wird, es erfrischt die Wiedergabe eines input Feld und 2 Befehlsschaltflächen. Das validFile ist eine boolesche Variable und nach dem Hochladen der Datei ist es wahr. Aber mit dem Befehlsschaltfläche mit dem Symbol funktioniert das Update nicht, während die anderen 2 tut.

Wenn jemand eine bessere Idee für die Anzeige der Fontawesome-Ikone hat, ist das auch willkommen.

UPDATE:

It "fast" funktioniert, wenn ich auf den Befehl auf diese Weise beziehen: tickIcon, so von der Ajax-Komponente schreibe ich dies:

<f:ajax listener="#{bean.tempUpload()}" 
          render="showFileName createButton :tickIcon" /> 

Fast, weil es funktioniert nur wenn ich auf die vorherige Registerkarte im Assistenten zurück gehe und dann zurück. Die Komponenten werden zunächst nicht aktualisiert.

UPDATE 2:

Es funktioniert jetzt, änderte ich den Code auf diese Weise:

<f:ajax listener="#{bean.tempUpload()}" 
          render="@form" /> 

So ist die ganze Form aktualisiert.

Answer 1

Wenn ich es richtig verstehe, müssen Sie nur der Spalte eine ID geben und diese anstelle der Schaltfläche aktualisieren. Problem ist, dass Sie eine Komponente, die nicht im DOM vorhanden ist, nicht aktualisieren können (was mit Javascript passiert).

Der normale "Trick" ist, die Komponente in eine h:panelGroup setzen und aktualisieren, aber in Ihrem Fall denke ich, Sie können auch nur die p:column aktualisieren.