AJAX forms: making a sub-form show up when a box is checked

[ericjava.eric.chiralsoftware.net]

I'm continuing to learn about how to do AJAX forms the right way, and here's my latest question.

I have a form where there is a boolean checkbox.  If the user selects it, a few more fields should appear.  For example, it's a should we contact you by telephone? If the user clicks yes, a field should become visible on the form asking for a phone number.

What's the best way to do this kind of thing?  I'm using RichFaces and Seam of course.

I tried having a rich:panel with rendered="#{myBean.contactByPhone}".  Then I had a:support which would reRender that rich:panel.  But that doesn't work.  If rendered=false, then reRendering doesn't change anything.  It needs to be rendered, but in an invisible or hidden state, which can then be switched to visible.

Any suggestions on the right way to do this?

Thanks

[damianharvey.damianharvey.gmail.com]

If you have rendered="false" then simply reRendering that panel will still return it with rendered="false". You need to have the rendered attribute dependent on some Bean property and change the value of that property before reRendering. For example:

<h:selectBooleanCheckbox value="#{testBean.contact}">
   <a:support event="onclick" 
      action="#{testBean.setDisplayTestPanel(true)}"
      reRender="testPanel" 
      ajaxSingle="true"/>
</h:selectBooleanCheckbox>

<a:outputPanel id="testPanel">
   <a:outputPanel rendered="#{testBean.displayTestPanel}">
      <h:inputText value="#{testBean.phone}"/>
   </a:outputPanel>
</a:outputPanel>

Note: you need the nested panel as you can't reRender something that has rendered="false". You need to reRender it's parent.

But IMO using ajax to reRender something like this is overkill. You're better off setting it to style="display:none;" and then using something like jQuery or scriptaculous to display it. For example using rich:jQuery:

<rich:jQuery name="toggleTestPanel" timing="onJScall" selector="#testPanel" query="slideToggle('slow')" />

<h:selectBooleanCheckbox value="#{testBean.contact}" onclick="toggleTestPanel();"/>

<a:outputPanel id="testPanel" style="display:none;">
   <h:inputText value="#{testBean.phone}"/>
</a:outputPanel>

Cheers,

Damian.

[ericjava.eric.chiralsoftware.net]

THANK YOU Damian.  That's cool.  That's exactly what I needed to know.

I use the a:outputPanel with a sub-panel.  That lets me also call an action as the sub-form expands.  I also tried the jQuery stuff and it's very cool and I'll be using that also in some other instances.  I liked the slow opening effect.