Question

我目前正在处理一个问题，我想根据用户选项显示和隐藏同一<td>下的某些字段。条件是，当用户点击客户单选按钮时，我必须显示与客户相关的输入字段，当他点击卖家选项单选按钮时，我必须向他显示卖家相关信息。默认情况下，我显示的panelGroup包含与Customer相关的信息我的代码如下

<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>

现在的问题是，在页面加载时，它向我显示了正确的客户面板，但是当我将单选按钮更改为卖方单选按钮时，它应该隐藏客户面板并向我显示卖家面板，因为我正在重新调整两个面板改变单选按钮。我的radiobuttons相关代码如下：

<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>

任何想法？

Answer 1

当由于ajax请求而重新呈现元素时，您无法通过直接重新呈现来隐藏组件，因为JSF不会将隐藏（哪个呈现的属性求值为false）组件发送到浏览器，而JSF不知道该元素应该得到隐藏在DOM中。要解决此问题，请创建一个包装元素，并在执行ajax请求时重新呈现它。使用这种方法，当响应返回到浏览器时，隐藏块的HTML将丢失，并且不会进入浏览器的DOM。代码应该是这样的：

<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>

你应该在a4j：support的reRender属性中设置包装组件的id（在这种情况下为 panelWrapper ）。

如何在单击单选按钮时显示隐藏h：panelgroup

1 个答案: