render based on h:selectOneMenu value

Question

I want to display div layers based on h:selectOneMenu selected value. I cr

eated this code:

    <h:selectOneMenu id="zone" value="#{download.zone}" style="width: 212px;">
        <f:selectItem id="select" itemLabel="Select download mirror" itemValue="Select download mirror" />
        <f:selectItem id="USA" itemLabel="USA" itemValue="USA" />
        <f:selectItem id="Canada" itemLabel="Canada" itemValue="Canada" />
    </h:selectOneMenu>

...

private String zone;

    public String getZone()
    {
        return zone;
    }

    public void setZone(String zone)
    {
        this.zone = zone;
    }

This is the div layer which I want to display based on value:

<div id="usa_release_server" style="padding-top: 20px;" class="text" rendered="#{download.zone == 'USA'}">
                                <h6>USA release server</h6>
</div>

But when select value in h:selectOneMenu nothing happens. Do you have idea what I'm missing?

Zim · Answer 1 · 2015-06-14T16:27:16.640

2

rendered is not a valid HTML attribute, it has to be used on JSF tags. Here you can use a <h:panelGroup> component with layout="block" which will render a <div>, and add an ajax component to update it on <h:selectOneMenu> change:

<h:form>
    <h:panelGroup layout="block" id="usa_release_server"
        style="padding-top: 20px;" styleClass="text"
        rendered="#{download.zone eq 'USA'}">
        <h6>USA release server</h6>
    </h:panelGroup>
    <h:selectOneMenu id="zone" value="#{download.zone}"
        style="width: 212px;">
        <f:selectItem id="select" itemLabel="Select download mirror"
            itemValue="Select download mirror" />
        <f:selectItem id="USA" itemLabel="USA" itemValue="USA" />
        <f:selectItem id="Canada" itemLabel="Canada" itemValue="Canada" />
        <f:ajax event="change" render="@form" />
    </h:selectOneMenu>
</h:form>

edited Jun 14 '15 at 16:27

answered Jun 14 '15 at 13:39

Zim

1,457
1
10
21

For some reason the code example is not working. h:panelGroup is not visible when I select USA. Maybe I need to put the components into form? – Peter Penzov Jun 14 '15 at 16:10
I implemented the code but I noticed one very small issue. When I select USA from the list there is a AJAX call for 2-3 seconds. Is there a way to skip this time? – Peter Penzov Jun 14 '15 at 16:23
I edited my code, I made a small mistake trying to update a component that's not rendered. – Zim Jun 14 '15 at 16:29
Can I somehow render the h:selectOneMenu without AJAX call? – Peter Penzov Jun 14 '15 at 16:30
Yes, with plain Javascript, but the Ajax call should not take 2-3 seconds, unless you have thousands of components in your view... – Zim Jun 14 '15 at 16:34
Is there a way to display progress bar or something similar during the AJAX call? – Peter Penzov Jun 14 '15 at 17:22

render based on h:selectOneMenu value

1 Answers1