update attribute not working as expected while trying to render panels conditionally

Question

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

score 0 · Answer 1 · answered Nov 19 '18 at 09:16

0

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.

answered Nov 19 '18 at 09:16

Jimmo

19
3

that is what I have in my update attribute. update=":panel2, :panel3" and update=":#{p:component('panel2')} :#{p:component('panel3')}" are the same ryt ? – Naxi Nov 19 '18 at 09:46

score 0 · Answer 2 · answered Nov 19 '18 at 10:02

0

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

answered Nov 19 '18 at 10:02

Naxi

1,504
5
33
72

This is expected yes - you can't update a component, which was never rendered. Your case will also work, when you update the parent component instead the children, which was not rendered yet. – tandraschko Nov 19 '18 at 10:28
@tandraschko: as mentioned in the 'duplicate' – Kukeltje Nov 20 '18 at 09:54

update attribute not working as expected while trying to render panels conditionally

2 Answers2