CODEWITHSUNDEEP
javahtmlprimefaces
Jay
Jay

Reputation: 9509

Primefaces ajax update not working for field inside <p:column>

I have a primefaces code like this. After selecting the drop down, if the value is 'M', I want to render a comment textarea.

It works fine and shows the textarea, but on selecting 'F', it is not hiding the textarea even though the renderComments value is false.

I think the update is not happening properly because of the < p: column> tag. How to fix this, please

HTML

        <p:panelGrid>

            <p:row>
                <p:column style="width:15%">
                    <p:selectOneMenu id="gender" value="#{myBean.model.gender}">
                        <f:selectItem itemValue="M" itemLabel="Male" />
                        <f:selectItem itemValue="F" itemLabel="Female" />
                        <p:ajax event="change" listener="#{myBean.genderListener}" process="@this" update="commentsCol comments" />
                    </p:selectOneMenu>
                </p:column>

                <p:column id="commentsCol" style="width:50%">
                    <p:inputTextarea id="comments" cols="100" rows="2" value="#{myBean.model.comments}" rendered="#{myBean.renderComments}" />
                </p:column>
            </p:row>


        </p:panelGrid>

Bean

/**
 * Event for gender.
 */
public void genderListener() {

    if ("M".equalsIgnoreCase(model.getGender())) {
        renderComments = true;
    }
    else {
        renderComments = false;
    }
}

Update

If I use update="@form" it works. However it updates the whole form which I dont expect. Not sure what is wrong if I specify only the ids (commentsCol comments)

Upvotes: 2

Views: 4703

Answers (3)

Jay
Jay

Reputation: 9509

I managed to fix this by wrapping a < h: panelGroup> around the element and using the panelGroup id alone to update.

The equivalent full code is like this 

    <p:panelGrid>
        <p:row>
            <p:column style="width:15%">
                <p:selectOneMenu id="gender" value="#{myBean.model.gender}">
                    <f:selectItem itemValue="M" itemLabel="Male" />
                    <f:selectItem itemValue="F" itemLabel="Female" />
                    <p:ajax event="change" listener="#{myBean.genderListener}" process="@this" update="commentsPanel" />
                </p:selectOneMenu>
            </p:column>

            <p:column style="width:50%">
                <h:panelGroup id="commentsPanel">               
                    <p:inputTextarea id="comments" cols="100" rows="2" value="#{myBean.model.comments}" rendered="#{myBean.renderComments}" />
                </h:panelGroup>
            </p:column>
        </p:row>

    </p:panelGrid>

Upvotes: 1

mishh
mishh

Reputation: 123

I solved the problem by putting an id on the p:panelGrid and updating that instead of the column.

    <p:panelGrid id="foo">

        <p:row>
            <p:column style="width:15%">
                <p:selectOneMenu id="gender" value="#{myBean.model.gender}">
                    <f:selectItem itemValue="M" itemLabel="Male" />
                    <f:selectItem itemValue="F" itemLabel="Female" />
                    <p:ajax event="change" listener="#{myBean.genderListener}" process="@this" update="foo" />
                </p:selectOneMenu>
            </p:column>

            <p:column id="commentsCol" style="width:50%">
                <p:inputTextarea id="comments" cols="100" rows="2" value="#{myBean.model.comments}" rendered="#{myBean.renderComments}" />
            </p:column>
        </p:row>


    </p:panelGrid>

Upvotes: 4

KHanusova
KHanusova

Reputation: 197

Try to update "comments" instead of "commentsCol"

Upvotes: 0

Related Questions