How to properly use selectOneMenu onchange event when missing ajax support?

Question

I need help in this frequent problem in my project.

I want to refresh a list of values list2 based on the currently selected value in another list list1 using a method in my class bean, I want also to use Ajax instead of loading the entire page. The rerender property is not available in selectOneMenu.

I have tried:

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

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

The menu that should be updated:

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

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

I wonder if I can use some Richfaces tags to do this, or if there is another approach.

UPDATE:

The suggested solution gives me an error: <a4j:ajax> Tag Library supports namespace: http://richfaces.org/a4j, but no tag was defined for name: ajax I can see a4j:ajaxListener with only type attribute but no a4j:ajax, and also no f:ajax of any sort, I have looked here, but I am using JSF 2.2 not JSF 2.0.

Thank you

So, you're using the deprecated JSP view technology instead of its successor Facelets? That totally explains why the `` didn't work for you. It's only available in Facelets, not in JSP. Abandon JSP and migrate to Facelets. Asking for workarounds is fruitless. — BalusC, Nov 03 '15 at 09:23
Many thanks @BalusC, by simply renaming the file to *.xhtml I was able to find ``!. — TiyebM, Nov 03 '15 at 09:33

score 1 · Answer 1 · answered Nov 02 '15 at 17:14

Following code refresh second list on change event in first list (select many list in example, but it is the same mechanism for select one list. Plus if there selected more than 1 item in first list, the second is empty):

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

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

How to properly use selectOneMenu onchange event when missing ajax support?

1 Answers1