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:

Answer 1

You said "Without Page Refresh" in that case there are 2 ways you can achieve this:
1. AJAX: You have to attach cartInfo id with onChange event on your selectOneMenu
which will reRender cartInfo panelGroup
Example:

<h:selectOneMenu value="#{searchController.selectedCategory}">
        <f:selectItems value="#{searchController.formatedCategories()}" >               
        </f:selectItems>
      <f:ajax event="change" execute="@this" render="cartInfo"/>
    </h:selectOneMenu>

Note: You have to have some attribute in panelGroup to eveluate to true on change event.

2. JavaScript: You can have your Panel inside the div and can show/hide div again on onChange event.
Example:

<h:selectOneMenu value="#{searchController.selectedCategory}" onChnage="javascript: showDivFunction()">

...

<div id="divCartInfo" style="display:none">
<h:panelGroup id="carInfo">
.....
</div>

Answer 2

sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]

Check your head tag , you may have missed the h prefix , write h:head , I solved the problem by using the prefix h.

Answer 3

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.

Answer 4

---

I am very near the solution, but something is wrong. Ive done every thing as you said: 1st and 2nd problem are solved. The problem is that the panel carInfo does not get rendered when i pick the category.

Is there something wrong with the method in the managed bean? For some reason it does not get called. This is how my code currently looks like Managed bean

 public void carSelectedEvent(ValueChangeEvent e) {
    String tmp = (String) e.getNewValue();
    System.out.println("CALLED!!!!!");
    if (selectedCategory.trim().equals("automobili")) {
        carCategorySelected = true;
    } else if (e.getNewValue().toString().contains("NEKRETNINE")) {

    }
}

JSF page Select

<h:selectOneMenu value="searchController.selectedCategory">
        <f:selectItems value="#{searchController.formatedCategories()}" ></f:selectItems>
        <f:ajax event="change" action="searchController.carSelectedEvent" render="carInfo"/>
    </h:selectOneMenu>

JSF panel that needs to be displayed

<h:panelGroup id="carInfo" rendered="searchController.carCategorySelected">
...

When i navigate to the page everithing seems ok but i notice this message in the console:

INFO: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed. sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]