Conditional render of components

[Alan Smith]

Hi,

how can I render a component based on the current value of a selectOneMenu component? I have a smoker, non smoker selectOneMenu populated using an enum which has two types smoker and non-smoker (funnily enough!). If the user currently has smoker selected from the selectOneMenu, how can I render a set of checkboxes that will let them select the amount they smoke in a day ie 10, 15, 20, 30, 40+? This question isn't geared towards checkboxes but how to render any component based on the current selection in the selectOneMenu box.

Thanks,
Alan

[Tim Holloway]

You use the "rendered" attribute on the component to be conditionally rendered and reference a property in a backing bean.

Note that in vanilla JSF, the rendering process is only done when the entire page is displayed or refreshed, so to get the controls to appear and disappear at the moment you make the list selection, you'll need to code AJAX support into your list and inform it to re-render the target controls on completion of the AJAX event handling process.

[Alan Smith]

Tim Holloway wrote:You use the "rendered" attribute on the component to be conditionally rendered and reference a property in a backing bean.

Note that in vanilla JSF, the rendering process is only done when the entire page is displayed or refreshed, so to get the controls to appear and disappear at the moment you make the list selection, you'll need to code AJAX support into your list and inform it to re-render the target controls on completion of the AJAX event handling process.

Hi Tim,

I am just using a simple example here to try and get this to work but I can't. I have something like this:

 <h:body>

        <h:selectOneMenu value="#{bean.item}">
            <f:selectItem itemValue="one" />
            <f:selectItem itemValue="two" />
            <f:selectItem itemValue="three" />
            <f:ajax render="results" />
        </h:selectOneMenu>

        <h:panelGroup id="results">
            <h:panelGroup rendered="#{bean.item == 'one'}">
                You have selected "one".
            </h:panelGroup>
            <h:panelGroup rendered="#{bean.item == 'two'}">
                You have selected "two".
            </h:panelGroup>
            <h:panelGroup rendered="#{bean.item == 'three'}">
                You have selected "three".
            </h:panelGroup>
        </h:panelGroup>

    </h:body>

This is an example someone on another site told me would work but it doesn't. My code is a bit more complicated in that I use f:selectItems instead of f:selectItem that is shown here, but I can't even get this working. I can find very little info on conditional rendering using f:ajax.

EDIT: FIXED! I forgot to include my <h:form> tag, doh!