JSF 2.0 How to display a different h:panelGroup each time an item is selected from a selectOneMenu

Question

I have a selectOneMenu that displays some different stuff categories:

<h:selectOneMenu value="#{searchController.selectedCategory}">
        <f:selectItems value="#{searchController.formatedCategories()}" >               
        </f:selectItems>
    </h:selectOneMenu>

I need to display a different panelGroup depending on the selected category. Example(This one needs to be displayed, when the first item is selected)

<h:panelGroup id="carInfo">
        <h:outputText value="marka" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedCarMarks()}" />
        </h:selectOneMenu>
        <h:outputText value="godina" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedYearFrom()}" />
        </h:selectOneMenu>
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedYearTo()}" />
        </h:selectOneMenu>
        <h:outputText value="kms.:" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.kmsFrom()}" />
        </h:selectOneMenu>
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.kmsTo()}" />
        </h:selectOneMenu>
    </h:panelGroup>

I dont know how to do this, because i need to do it with out refreshing the page. Any ideas? Can Ajax help me here? If so could somebody tell me how please? I am not familiar with at all.

Answer 1

This could be done easily via ajax:

• Put the <h:panelGroup> elements inside an outer <h:panelGroup>
• Nest an <f:ajax> inside the <h:selectOneMenu> and put the id of the outer <h:panelGroup> in its render attribute.
• Give each of the inner <h:panelGroup> elements a rendered attribute that evaluates to true only if the corresponding category is selected.