JSF AJAX替换下拉列表中选择元素 [英] JSF ajax replace element on drop-down list selection

问题描述

我有2列，其中每一个下拉列表中的数据表。我希望它：

I have a datatable with 2 columns, each of which is a drop-down list. I want it to:

1），第二个下拉列表中的选择是基于在第一个下拉列表中选择的选项填充

1) the choices of the second drop-down list are populated based on the option selected in the first drop-down list

2）第二下拉列表置换为文本框，如果第一个被选择为其他。

2) the second dropdown list is replaced by a text box if the first one is selected to "Others".

下面是我的code：

<p:column style="vertical-align: bottom;" headerText="Type">
   <h:selectOneMenu id="problemTypeDropdown" value="#{problem.type}">
        <f:selectItems value="#{backingBean.problemTypeList}"/>
            <p:ajax listener="#{backingBean.updateDescriptionDropdownList}"
                    update="problemDescriptionDropdown, problemDescText" />
            <f:attribute name="item" value="#{problem}"/>
            </h:selectOneMenu>
</p:column>
<p:column style="width: 200px; vertical-align: bottom;" headerText="Description">
    <h:selectOneMenu id="problemDescriptionDropdown"
                     value="#{problem.description}"
                     rendered="#{problem.type!='Other'}">
        <f:selectItems value="#{backingBean.descriptionDropdownList}"/>
    </h:selectOneMenu>
    <p:inputText id="problemDescText"
                 value="#{problem.description}"
                 rendered="#{problem.type=='Other'}"/>
</p:column>

支持bean：

Backing bean:

public void updateDescriptionDropdownList(AjaxBehaviorEvent event) {
    ProblemItem di = (ProblemItem)event.getComponent().getAttributes().get("item");

    if (di.getType().equals("Other"))
        return;
    descriptionDropdownList = getDescriptionList(di.getType());
}

有可填充的基础上的第一列表的选择现在的第二列表，但第二列表并非通过文本框替换如果第一是其他。

It can populate the second list based on the selection of first list now, but the second list is not replaced by the text box if the first is "Other".

有人能告诉我什么地方错了我的code和如何解决它？非常感谢你。

Can someone please tell me what's wrong with my code and how to fix it? Thank you very much.

推荐答案

您需要将H：selectOneMenu用于和p：inputText的一个容器/面板和Ajax事件后更新容器

you need to place h:selectOneMenu and p:inputText in a container/panel, and update the container after ajax event.

    <p:column style="vertical-align: bottom;" headerText="Type">
        <h:selectOneMenu id="problemTypeDropdown" value="#{problem.type}">
            <f:selectItems value="#{backingBean.problemTypeList}"/>
                <p:ajax listener="#{backingBean.updateDescriptionDropdownList}"
                    update="problemDescPanel" />
                <f:attribute name="item" value="#{problem}"/>
        </h:selectOneMenu>
    </p:column>
    <p:column style="width: 200px; vertical-align: bottom;" headerText="Description">
        <h:panelGroup id="problemDescPanel">
            <h:selectOneMenu id="problemDescriptionDropdown"
                 value="#{problem.description}"
                 rendered="#{problem.type!='Other'}">
                <f:selectItems value="#{backingBean.descriptionDropdownList}"/>
            </h:selectOneMenu>
            <p:inputText id="problemDescText" rendered="#{problem.type=='Other'}"
                 value="#{problem.description}" />
        </h:panelGroup>
    </p:column>

这篇关于JSF AJAX替换下拉列表中选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！