Toggle 2 pannel groups with 'rendered' and ajax

Question

I need to toggle between two different views in JSF2 and I'm hoping to do it with f:ajax but it doesn't seem to work.

Here's my code:

<h:selectOneMenu valueChangeListener="#{searchResults.selectViewType}" value="#{searchResults.viewType}">
   <f:selectItem itemLabel="Type 1 View" itemValue="type1View" noSelectionOption="true"/>
   <f:selectItem itemLabel="Type 2 View" itemValue="type2View"/>
   <f:ajax render="type1viewid type2viewid" />
</h:selectOneMenu>          

<br/><br/>        
<h:panelGroup id="type1viewid" rendered="#{searchResults.isViewType1()}">         
    <h2>type 1 view</h2>
</h:panelGroup>

<h:panelGroup id="type2viewid" rendered="#{searchResults.isViewType2()}">
    <h2>type 2 view</h2>
</h:panelGroup>

In the backing bean:

public void selectViewType(ValueChangeEvent e) {
    System.out.println("viewType called with " + e.getNewValue() + ", " + e.getOldValue());
    String selected = (String)e.getNewValue();

    if(selected.equalsIgnoreCase("type1View")) {
        viewType = "type1View";
    }
    else if(selected.equalsIgnoreCase("type2View")) {
        viewType = "type2View";
    }
}

If I'm refreshing the page, the views toggle correctly between 1 and 2. But simply selecting between 1 and 2 doesn't have any effect.

Answer 1

Wrap them with parent and update this parent instead. Ajax update/render does not work on a component which has rendered attribute

Also you lack submitting the value if you want to see update after selecting option from <h:selectOneMenu>

<f:ajax render="panelsWrapper" execute="@this"/>