show a panel in primefaces depending on a dropdownlist

Question

I have a drop down list with several values and I want to show a panel only if a value has been selected

Here is the code simplified

 <p:selectOneMenu id="" value="#{myBean.myElement}" >
    <f:selectItem itemLabel="Choose an element itemValue=""  />        
    <f:selectItems value="#{myBean.myElementList}" />
    <p:ajax update="myPanel" listener="#{myBean.handleChange}"/>
 </p:selectOneMenu>   

 <p:panel id="myPanel" header="My Header" style="margin-bottom:10px;" rendered="#{myBean.myElement != null}">  

But this does not seem to work (it works only if I refresh manually the page). How could you fix this ?

Answer 1

Since myPanel is not rendered, the component won't be in the component tree, so it cannot be updated later in the view. Use another UIContainer to wrap it like <h:panelGroup> and update this container:

<p:selectOneMenu id="" value="#{myBean.myElement}" >
    <f:selectItem itemLabel="Choose an element itemValue=""  />        
    <f:selectItems value="#{myBean.myElementList}" />
    <!-- here update to foo instead of myPanel -->
    <p:ajax update="foo" listener="#{myBean.handleChange}"/>
</p:selectOneMenu>

<h:panelGroup id="foo">
    <p:panel id="myPanel" header="My Header" style="margin-bottom:10px;"
        rendered="#{myBean.myElement != null}">
</h:panelGroup>