单击后如何使用 ajax 隐藏 h:selectOneListbox 组件？答案

【问题标题】：How to hide h:selectOneListbox component using ajax after click?单击后如何使用 ajax 隐藏 h:selectOneListbox 组件？
【发布时间】：2012-08-16 03:52:50
【问题描述】：

我有一个<h:selectOneListbox>，当点击<h:commandbutton> 时出现。当用户从列表框中选择时，我希望所选值出现在 <h:inputText> 中并隐藏列表框。

我无法让 <h:selectoneListbox> 在出现后停止渲染。 rendered 属性在视图首次出现时工作正常，但在我单击列表并调用侦听器后被忽略。

有什么想法吗？

这是 Facelet：

<h:panelGroup>
    <h:inputText id="TitleText" value="#{bindingScheduleHandler.title}"/>
    <h:commandButton value="Clients" actionListener= #bindingScheduleHandler.clientList}" />

    <h:selectOneListbox id="listBox" value="#{bindingScheduleHandler.clients}" size="5"  
        rendered="#{bindingScheduleHandler.showClients}">
        <f:selectItems value="#{bindingScheduleHandler.clientLabelsValues}" />
        <f:ajax event="click" listener="#{bindingScheduleHandler.clickListener}"  
            render="TitleText" />
    </h:selectOneListbox>
</h:panelGroup>

这是支持 bean：

public void clickListener(AjaxBehaviorEvent event) {
    this.title = clients;
    showClients = false;
    renderClientList = false;
}

【问题讨论】：

标签： ajax jsf jsf-2

【解决方案1】：

在<f:ajax render> 中，您不能引用由 JSF 有条件地呈现的组件。相反，您需要引用一个始终呈现的父组件。简单的解释是<f:ajax> 正在使用 JavaScript 来更新由 JSF 组件表示的 HTML 元素的内容（节点值）。无法显示/隐藏 HTML 元素本身。

只需更新父组件即可。

<h:panelGroup id="group">
    <h:inputText id="TitleText" value="#{bindingScheduleHandler.title}"/>
    <h:commandButton value="Clients" actionListener= #bindingScheduleHandler.clientList}" />

    <h:selectOneListbox id="listBox" value="#{bindingScheduleHandler.clients}" size="5"  
        rendered="#{bindingScheduleHandler.showClients}">
        <f:selectItems value="#{bindingScheduleHandler.clientLabelsValues}" />
        <f:ajax event="click" listener="#{bindingScheduleHandler.clickListener}"  
            render="group" />
    </h:selectOneListbox>
</h:panelGroup>

顺便说一句，这也将立即解决所选项目未显示在<h:inputText>中的问题:)

【讨论】：