Nsryjdtyk

I am trying to show/hide my panels based upon a boolean value present on the backing bean but it's not working as expected and there is no change on the UI.
This works fine for the first time (only one of the panels is shown) when the app loads but then after there is no update performed.

I know that for the update to be performed, the element should exist in the dom already so it doesn't update the panel which is not rendered by the server . But my query is why the other panel (shown when the app loads) doesn't get hidden when the boolean condition changes.

xhtml file

    <p:panel>

        <h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Case

            Type</h6>

        <!-- comment type -->

        <p:selectOneListbox id="caseTypeId"

            value="#{treeBean.caseTypeOption}">

            <f:selectItems value="#{treeBean.caseType}" var="X"

                itemLabel="#{X}" itemValue="#{X}" />

                <p:ajax listener="#{treeBean.caseTypeList}" update=":#{p:component('panel2')} :#{p:component('panel3')}"/>

        </p:selectOneListbox>

    </p:panel>



    <p:panel id="panel2" rendered="#{treeBean.editmode}">

        <h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Something

            </h6>



        <p:selectOneListbox id="somethingId"

            value="#{treeBean.somethingOption}">

            <f:selectItems value="#{treeBean.something}" var="X"

                itemLabel="#{X}" itemValue="#{X}" />

        </p:selectOneListbox>

    </p:panel>



    <p:panel id="panel3" rendered="#{!treeBean.editmode}">

        <h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Anything

            </h6>



        <p:selectOneListbox id="anythingId"

            value="#{treeBean.anythingOption}">

            <f:selectItems value="#{treeBean.anything}" var="X"

                itemLabel="#{X}" itemValue="#{X}" />

        </p:selectOneListbox>

    </p:panel>



    </h:panelGrid>

Backing bean (omitting details)

if (this.caseTypeOption.equalsIgnoreCase("XXX")) {

        this.editmode = false;



    } else {

        this.editmode = true;

    }

wher XXX is one of the options in caseTypeId select box.

How to make this work for both the panels ??

In the update action you should use only the name of the components that you want to update. In your case you should use update=":form:panel2, :form:panel3".
If this panels is in form you should use the form element before the name of the component, otherwise just the name of the component will make the trick.

Instead of rendered attribute , using visible attribute helped me to achieve what I wanted.

So instead of <p:panel id="panel2" rendered="#{treeBean.editmode}">

I used : <p:panel id="panel2" visible="#{treeBean.editmode}">