0

In an xhtml page with Primefaces I would like to display a tick icon with FontAwesome icon (fa-check). Since icon attribute can be added for example to a primefaces button or a primefaces commandButton, I use a commandButton with icon attribute. My problem is, if I refer to it from an another element with f:ajax render, there is an error:

malformedXML: During update formId:tickIcon not found

I know that there were already this kind of questions, but I didn't carry off resolve the problem.

Here are the relevant parts of my xhtml page:

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

More concrete by the h:inputFile there is an f:ajax, and when the file uploading is done, it refreshes the rendering of an inputText field and 2 commandButtons. The validFile is a boolean variable, and after the file uploading it is true. But by the commandButton with the icon the update doesn't work, while by the other 2 does.

If anyone has a better idea for displaying of the Fontawesome icon, that is also welcomed.

UPDATE:

It "almost" works if I refer to the commandButton this way: :tickIcon, so by the ajax component I write this: 

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

Almost, because it works only if I go back to the previous tab in the wizard and then back. The components are not updated at first.

UPDATE 2:

It works now, I changed the code this way:

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

So the whole form is updated.

spaghetti_code
  • 145
  • 3
  • 17

1 Answers1

0

If I understand it correctly you just need to give the column an id, and update that instead of the button. Problem is you can't update a component (which happens with javascript) that does not exist in the DOM in the first place.

The normal "trick" is to put the component in a h:panelGroup and update that, but in your case I think you can as well just update the p:column.

Jaqen H'ghar
  • 4,305
  • 2
  • 14
  • 26