0

I want to build a form that dynamically changes the components visible depending on the state of other components.

For example... There are some text boxes and some check boxes, and if the user activates a certain check box, a bunch of other input elements should appear.

Can I do this with JSF 2.0 + Tomahawk or do I have to get another library to do this? And how can I do it? This won't work without AJAX, will it?

Thanks in advance!

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
geeehhdaa
  • 822
  • 5
  • 17
  • 30

1 Answers1

6

Ajax is a convenient way to do this and JSF 2.0 comes with ajax bundled.

Here is an example:

<h:selectOneRadio value="#{a7.myCheckbox.state}">
      <f:selectItem itemLabel="#{bundle.yes}" itemValue="1"/>
      <f:selectItem itemLabel="#{bundle.no}" itemValue="0"/>
      <f:ajax render="uawGroup"/>
</h:selectOneRadio>

<h:panelGroup id="uawGroup" layout="block">
   <h:outputText value="#{bundle.wichmed}"
        rendered="#{a7.myCheckbox.state == 1}"/>
   <h:inputText value="#{}" id="myInput"
        rendered="#{a7.myCheckbox.state == 1}"/> 
</h:panelGroup>

The h:panelGroup will be rendered when "yes"-option is clicked in h:selectOneRadio (itemValue == 1). Initially it is 0 (set in the bean "a7").

The h:panelGroup acts as wrapper since you can only update components with ajax that are actually rendered on the page (h:outputText and h:inputText are initially not displayed).

Matt Handy
  • 29,855
  • 2
  • 89
  • 112
  • This is great, thanks! But how does it work if I want to display a certain set of components if a h:button was clicked? Thank you! – geeehhdaa Apr 14 '11 at 15:58
  • To make it clear what I'm trying to do: I have some panelGrids and I want the user to go through them step by step (fill in the the stuff in grid1, press the button which makes grid2 appear, and so on). How can I achieve this? And can I already let the server process certain inputs of grid1 to display results in grid2? – geeehhdaa Apr 14 '11 at 16:32
  • @geeehhdaa You can put the `f:ajax` inside an `h:commandButton` as well. Use the `execute` attribute to process input fields during ajax calls: `` – Matt Handy Apr 14 '11 at 17:45
  • Thank you! The problem is though, that I want those panelGroups to be initially invisible. So the effect should not cause stuff to process, it should only make the next panelGroups visible. How should I choose the render attribute of the groups that should appear only if the button was clicked then? The button has no state, has it? Edit: Actually one of the buttons should call some action. How can I AJAX-call an action? – geeehhdaa Apr 15 '11 at 16:20