how to show hide a h:panelgroup while click on a radio button

Question

I am currently working on a problem where I want to show and hide some fields under the same <td> depending upon the user option. the condition is that when user clicks on the customer radio button than i have to show the input fields related to the customer and when he clicks on the seller option radio button than i have to show him the seller related information. By default i am displaying the panelGroup containing the information related to Customer My code is as follows

<h:panelGroup id="customnerPanel" rendered="#{saleBean.saleVO.personType == 1}">
  all input fields related customer goes here
</h:panelGroup>
<h:panelGroup id="sellerPanel" rendered="#{saleBean.saleVO.personType == 2}">
  all input fields related seller goes here
</h:panelGroup>

Now the problem is that on page load it shows me the customer panel which is correct, but when i change the radio button to seller radio button it should hide the custoimer panel and show me the seller panel as i am reRendering both panels on change of the radio buttons. My radiobuttons related code is as follwos:

<h:selectOneRadio id="radioChangeTenureButton" layout="lineDirection" value="#{saleBean.saleVO.personType}">
    <f:selectItem id="customerTypeId" itemLabel="For Customer" itemValue="1"  />
    <f:selectItem id="sellerTypeId" itemLabel="For Seller" itemValue="2" />   
    <a4j:support event="onclick" action="#{saleBean.updateCase}" reRender="customnerPanel,sellerPanel"  />
</h:selectOneRadio> 

any ideas?

Answer 1

When rerendering elements as a result of ajax requests you cannot hide a component by rerendering directly because JSF doesn't send the hidden (which rendered attribute evaluates to false) component to the browser and JSF has no idea that the element should get hidden in the DOM. To solve this problem create a wrapping element and rerender it when performing ajax request. With this approach when the response gets back to the browser, the HTML of the hidden block will be missing and it will not get in the browser's DOM. The code should become something like this:

<h:panelGroup id="panelWrapper">
  <h:panelGroup id="customnerPanel" rendered="#{saleBean.saleVO.personType == 1}">
    all input fields related customer goes here
  </h:panelGroup>
  <h:panelGroup id="sellerPanel" rendered="#{saleBean.saleVO.personType == 2}">
    all input fields related seller goes here
  </h:panelGroup>
</h:panelGroup>

And you should set the id of the wrapping component (panelWrapper in this case) in the reRender attribute of a4j:support.