CODEWITHSUNDEEP
ajaxjsfprimefaces
Hoang Phuoc Truong
Hoang Phuoc Truong

Reputation: 189

JSF ajax replace element on drop-down list selection

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

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

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

Below is my 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>

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

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

Upvotes: 2

Views: 2904

Answers (1)

tt_emrah
tt_emrah

Reputation: 1053

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>

Upvotes: 2

Related Questions