Question

In my application, I have the following piece of code:

<h:form>
    <h:panelGrid id="initPanel" columns="3">
        <h:outputLabel for="type" value="*Type: " />
        <h:selectOneMenu label="type" id="type" value="#{createNews.type}"
                         required="true" requiredMessage="Type is required.">
            <f:ajax render="typePanel" />
            <f:selectItem noSelectionOption="true" itemLabel="Choose one..." />
            <f:selectItem itemValue="Article" itemLabel="Article" />
            <f:selectItem itemValue="Video"   itemLabel="Video" />
        </h:selectOneMenu>
        <p:message for="type" />

        <h:outputLabel for="title" value="*Title: " />
        <p:inputText label="title" id="title" 
                     value="#{createNews.news.title}" 
                     required="true" requiredMessage="Title is required." />
        <p:message for="title" />
    </h:panelGrid>

    <h:panelGroup id="typePanel">
        <h:panelGrid rendered="#{createNews.type == 'Article'}" columns="1">
            <h:panelGrid columns="2">
                <h:outputLabel for="content" value="*Content: " />
                <p:message id="contentMsg" for="content" />
            </h:panelGrid>

            <p:editor id="content" value="#{createNews.news.content}" width="580" />
        </h:panelGrid>

        <h:panelGrid rendered="#{createNews.type == 'Video'}" columns="3">
            <h:outputLabel for="embedCode" value="*Embed code: " />
            <p:inputText label="embedCode" id="embedCode" 
                         value="#{createNews.news.embedCode}" />
            <p:message for="embedCode" />
        </h:panelGrid>
    </h:panelGroup>

    <p:commandButton value="Confirm" update="initPanel typePanel" actionListener="#{createNews.createNews}" />

</h:form>

And this is the managed bean:

@Named(value = "createNews")
@RequestScoped
public class CreateNews {
    private Integer type;
    private News    news;

    public void createNews() {...}

    // Getters and Setters
}

When I choose Article or Video, the corresponding portion is rendered correctly in typePanel. In the below example, I chose Video and the Embed code portion was rendered.

However, when I click Confirm, the portion rendered earlier suddenly disappear.

Somehow, the type property of my managed bean did not receive the value of the <h:selectOneMenu>.

I’d be very grateful if you could give me an advice.

Best regards,

Answer 1

This problem is caused by the following 2 facts:

• A request scoped bean is created on every request (including ajax requests).
• Model values are not updated in case of a general validation failure.

When you change the dropdown, you’re creating one request scoped bean wherein the right property for the rendered attribute is been set. But the request scoped bean is of course garbaged by end of request. When you submit the confirm button, a brand new request scoped bean is created with all properties set to default which are not updated due to a general validation failure, that’s why the rendered attribute evaluates back to false.

Placing the bean in the JSF view scope or CDI conversation scope should solve it.

An alternative is to bind the dropdown to an UIInput in the current view scope and evaluate the selected value by its UIInput#getValue() instead.

<h:selectOneMenu ... binding="#{type}">
...
<h:panelGrid rendered="#{type.value == 'Article'}">
...
<h:panelGrid rendered="#{type.value == 'Embed'}">

See also:

• How to choose the right bean scope?