Client side rendeing

[S Majumder]

Hi every body I have a query ,
is it possible to client side rendering in the JSF ?

Here I am describing what I want,
I have two radio buttons say radio1 & radio2 , these two radio buttons are independent with each other .
When user click the radio1 then page will render and show some fields below the radio1 .
Same if user click radio2 some fields will get render show below the radio2 , currently I have achived this by using the panelGrid's render
property , each and evry call I am going to the server & making the render property true / false & showing the proper fields .
My question is, is this possible in the client side , without rendering in the server trip ?

thanks and regards,
S

[Gerbrand van Dieijen]

You can accomplish that with ajax. Ajax4jsf is an easy to use library for JSF, that allows you to execute (server-side) java code when a javascript event occurs (such as onchange, onclick, etc.) and rerender part of the browser-view. Technically, still a server-call is made, but since the only a portion of the browser-view is redrawn, the effect is the same as you would have with client-side javascript only.
Ajax4jsf is integrated with the jsf library richfaces, but can be used apart from richfaces too.
The richfaces library has also a few controls such as togglepanel and jtree that can render part of the content completely client-side, so that for example no server-call is needed when the user switches a panel or opens a tree-item.

See: Richfaces developer guide and Ajax4jsf

[S Majumder]

Thanks for your reply ,
but my problem is something different ,
here I am try to describe the problem :
i have two radio say , radio1 and radio2.When user click the radio1 one field will get render below the radio1,
after that if user select radio2 the field that got render below radio1 will not show in the page & a new field will get render
below radio2 .
How could I control two different rendering in the client side ?

regards,
S

[Tim Holloway]

Visualize it like this:

  Radio Button 1
    DIV 1

  Radio Button 2
    DIV 2

I'm keeping to DHTML terms, since that's what the JSF has to produce on the browser side, but by using an AJAX-aware tag library such as RichFaces, you can do the same thing at a more abstract level. DIV1 and DIV2 are simply blocks of dependent controls and display items. A 1-column panelGrid is a reasonable JSF equivalent. Or more than 1 columns, if you have more complex layout.

Essentially, the "oncheck" function for Radio Button 1 should set the "visible" attribute of DIV1 to "true" and the "visible" attribute of DIV2 to "false". And the reverse, for Radio Button 2.

If there's no need to inform the backing bean, you can do all this in JavaScript. If you need to update the backing bean, use AJAX, like Gerbrand said. In that case, you can use a "rendered" attribute to show/hide DIV1 and DIV2. For example:

radio1
<h:dataGrid id="div1" rendered="{backingBean.div1Visible}">
...
</h:dataGrid>
radio2
<h:dataGrid id="div2" rendered="{not backingBean.div1Visible}">
...
</h:dataGrid>