在命令链接上使用ajax时，JSF 2.0，malformedXML

Question

I am trying to display a field in a form after an ajax request through a commandlink.However ,i get a malformedXML error when i click the link. The xhtml file looks like :

            <h:form>    
                .
                .
                <tr>
                    <td>Product Image*:</td>
                    <td>
                        <h:graphicImage url="#{addItem.prodFileName}" width="100" height="100"/>
                        <br /><h:commandLink  value="change image" >
                            <f:ajax event="click" render="uploadimage" execute="@this" listener="#{addItem.ChangeImage}"/>
                        </h:commandLink>
                    </td>
                </tr>

                <tr >
                    <td>
                        <t:inputFileUpload rendered ="#{addItem.editImgChange}" label="editImage" id="uploadimage" value="#{addItem.uploadedFile}" />
                        <h:messages for="prodimage"/>
                    </td>
                </tr>
                .
                .
            </h:form>

The AddItem bean is RequestScoped and it has the below lines of code:

    @ManagedBean
    public class AddItem extends AbstractBean {
        //..
    boolean editImgChange=false;
        //...           
    public void ChangeImage(){
    this.editImgChange=true;
        }
    }

Inshort,i want to display the t:inputFileUpload field only after user clicks the change image link. I have kept a flag editImgChange in the AddItem bean whose initial value is false and once user clicks the change image link ,the flag is changed to true. The program goes to the ChangeImage() method ,but after that i get the error

"malformedXML:During update:j_idt30:uploadimage not found"

.

I will be happy with a totally different solution also, to achieve the same result ,incase my design is bad.

Answer 1

The render attribute should point to the ID of a component which is always rendered into the HTML. It's namely JavaScript who is supposed to update/replace its content based on the ajax response. But if the component is never rendered into HTML, then JavaScript won't be able to update/replace its content. You need to wrap it in another component which is always rendered into HTML and then update it instead.

Eg

<h:panelGroup id="uploadimage">
    <t:inputFileUpload rendered ="#{addItem.editImgChange}" label="editImage" value="#{addItem.uploadedFile}" />
</h:panelGroup>