如何在缺少ajax支持时正确使用selectOneMenu onchange事件?

时间:2015-11-02 16:24:26

标签: ajax richfaces jsf-2.2

我在项目中遇到这个常见问题需要帮助。

我想使用我的类bean中的方法基于另一个列表list2中当前选择的值刷新值list1的列表,我还想使用Ajax而不是加载整个页面。 rerender中没有selectOneMenu属性。

我试过了:

        <h:selectOneMenu id="list1" value="#{bean.currentSelectedObject1}" onchange="submit()" 
        valueChangeListener="#{bean.methodAct}">

        <f:selectItems value="#{bean.listObjects1}" />
        </h:selectOneMenu>

应更新的菜单:

        <h:selectOneMenu id="list2" value="#{bean.currentSelectedObject2}">

        <f:selectItems value="#{bean.listObjects2}" />
        </h:selectOneMenu>

我想知道我是否可以使用一些Richfaces标签来执行此操作,或者是否有其他方法。

更新

建议的解决方案给我一个错误:<a4j:ajax> Tag Library supports namespace: http://richfaces.org/a4j, but no tag was defined for name: ajax 我看到a4j:ajaxListener只有type属性,但没有a4j:ajax,也没有f:ajax,我看过here,但我正在使用{ {1}}不是JSF 2.2

谢谢

1 个答案:

答案 0 :(得分:1)

以下代码刷新第一个列表中的更改事件的第二个列表(在示例中选择多个列表,但是选择一个列表的机制相同。另外,如果在第一个列表中选择了多个项目,则第二个为空):

<h:panelGrid columns="1" border="0" cellpadding="0" cellspacing="0">
    <h:outputLabel value="#{msg.clients}" for="clientList" styleClass="boldlabel">
        <span class="required">*</span>
    </h:outputLabel>
    <h:selectManyListbox id="clientList"
        value="#{reportForm.selectedProviderIds}"
        label="#{msg.client}" size="8"
        style="min-width:120px;"
        valueChangeListener="#{reportForm.providerSelectionChanged}"
        immediate="true"
        required="true">
        <f:selectItems value="#{reportForm.providerList.list.list}"
            var="client"
            itemLabel="[#{client.providerCode}] #{client.name}"
            itemValue="#{client.providerId}" />
        <a4j:ajax event="change" render="retailerList, programList" />
    </h:selectManyListbox>
</h:panelGrid>

<h:panelGrid columns="1" border="0" cellpadding="0" cellspacing="0">
    <h:outputLabel value="#{msg.retailers}"
        for="retailerList" styleClass="boldlabel" />
    <h:selectManyListbox id="retailerList"
        value="#{reportForm.selectedRetailerIds}"
        label="#{msg.retailer}" size="8"
        style="min-width:120px;"
        valueChangeListener="#{reportForm.retailerSelectionChanged}"
        immediate="true">
        <f:selectItems value="#{reportForm.retailers.list.list}"
            var="item"
            itemLabel="[#{item.retailerCode}] #{item.name}"
            itemValue="#{item.retailerId}" />
        <a4j:ajax event="change" render="programList" />
    </h:selectManyListbox>
</h:panelGrid>

和Java:

/**
 * Reaction on selection in client list box
 * @param event - Value change event with new value of selected clients
 */
public void providerSelectionChanged(ValueChangeEvent event) {
    setSelectedProviderIds((Long[])event.getNewValue()); // sets new value(s) and clean related
    cleanClientRelatedComponents();
}

/**
 * Clean up source for client related UI components
 */
private void cleanClientRelatedComponents() {
    retailers = null; // needed for rebuild retailers
    setSelectedRetailerIds(null); // clean up retailer related source of data inside
}

/**
 * Sets selected retailer IDs and clean up source for related components
 * @param selectedRetailerIds the selectedRetailerIds to set
 */
public void setSelectedRetailerIds(Long[] selectedRetailerIds) {
    this.selectedRetailerIds = selectedRetailerIds;
    if (selectedRetailerIds != null && selectedRetailerIds.length == 1) {
        setSelectedRetailerId(selectedRetailerIds[0]);
    } else {
        setSelectedRetailerId(0); // rebuild list
    }
}