2

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.

Donato Szilagyi
  • 4,279
  • 4
  • 36
  • 53
javing
  • 12,307
  • 35
  • 138
  • 211

4 Answers4

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.
Michael Borgwardt
  • 342,105
  • 78
  • 482
  • 720
2

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>
JSS
  • 2,061
  • 1
  • 20
  • 26
1

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.)]

javing
  • 12,307
  • 35
  • 138
  • 211
  • Question 1st- I dont really know how to get the String that represents the selected value if the page is not refreshed Answer - Create a new string variable and use in the selectOneMenu Quest 2nd- It all the time displays both panels... Answer - Do not use instead put rendered="bean.booleanField" in panelGroup Quest 3rd- What should i actually do... in the panels? Answer - Check the value of newly created String variable and take decision accordingly. Also, you can use as you are using JSF2.0 – JSS Feb 12 '11 at 14:32
  • You should not post questions as answers. Either edit your question to update it or post a new question if it concerns a different concrete problem. See also http://stackoverflow.com/faq. – BalusC Feb 12 '11 at 20:03
  • Ok i will keep that on mind i will not post questions as answers. It is my first day on de forum, sorry about that. – javing Feb 12 '11 at 22:23
1

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.

Nusrat
  • 11
  • 1