Question

I have three combo boxes. The first one is populated with values. When I select a value from it, the second must be updated. After that, when I select a value from the second combo, the third should be populated. I know that this is already communicated, but with two combos. With more than two it is not working. Could you please tell me what I didn’t do properly?

Here is the view:

<h:form>
    <h:panelGrid columns="2">        
        <h:outputText value="Choose the produce type:"/>

        <h:selectOneMenu id="firstList"
                            value="#{userBean.firstItem}"                
                            valueChangeListener="#{userBean.valueChanged}">
            <f:selectItems value="#{userBean.firstList}"
                           var="element"
                           itemLabel="#{element.label}"
                           itemValue="#{element.value}" />
                <a4j:support reRender="outputPanel"
                             event="onchange"                                                                  
                             ajaxSingle="true"
                             bypassUpdates="false" />                
        </h:selectOneMenu>

        <a4j:outputPanel id="outputPanel">
            <h:selectOneMenu value="#{userBean.secondItem}"                
                             valueChangeListener="#{userBean.valueChanged}">
            <f:selectItems value="#{userBean.secondList}"
                           var="element"
                           itemLabel="#{element.label}"
                           itemValue="#{element.value}" />                    
                    <a4j:support reRender="outputPanel"
                             event="onchange"                                                                  
                             ajaxSingle="true"
                             bypassUpdates="false" />                                                 
            </h:selectOneMenu>

            <h:selectOneMenu value="#{userBean.thirdItem}"                
                             valueChangeListener="#{userBean.valueChanged}">
            <f:selectItems value="#{userBean.thirdList}"
                           var="element"
                           itemLabel="#{element.label}"
                           itemValue="#{element.value}" />                                                 
            </h:selectOneMenu>                
        </a4j:outputPanel>

    </h:panelGrid>
</h:form>

This is the Bean (this is a sample code without any meaningful sence):

@Name("userBean")
public class UserBean
{
@Logger private Log log;

@In StatusMessages statusMessages;

private String firstItem="";
private String secondItem="";
private String thirdItem="";
public List<SelectItem> firstList = new ArrayList<SelectItem>(); 
public List<SelectItem> secondList = new ArrayList<SelectItem>();
public List<SelectItem> thirdList = new ArrayList<SelectItem>();
private static final String [] FRUITS = {"Banana", "Cranberry", "Blueberry", "Orange"};
private static final String [] VEGETABLES = {"Potatoes", "Broccoli", "Garlic", "Carrot"};
private static final String [] GIRLS = {"Victoria", "Nana", "Etc.."};

public UserBean() {
    SelectItem item = new SelectItem("fruits", "Fruits");
    firstList.add(item);
    item = new SelectItem("vegetables", "Vegetables");
    firstList.add(item);
    item = new SelectItem("girls", "Girls");
    firstList.add(item);
    for (int i = 0; i < FRUITS.length; i++) {
        item = new SelectItem(FRUITS[i]);
    }
}

public List<SelectItem> getFirstList() {
    return firstList;
}

public List<SelectItem> getSecondList() {
    return secondList;
}

public List<SelectItem> getThirdList() {
    return thirdList;
}

public static String[] getFRUITS() {
    return FRUITS;
}

public static String[] getVEGETABLES() {
    return VEGETABLES;
}

public static String[] getGIRLS() {
    return GIRLS;
}

public void valueChanged(ValueChangeEvent event){
    String[] currentItems;
    String id = ((HtmlSelectOneMenu)event.getSource()).getId();
    if (id.equals("firstList")) {            
        currentItems = FRUITS;

        for (int i = 0; i < currentItems.length; i++) {
            SelectItem item = new SelectItem(currentItems[i]);
            secondList.add(item);
        }

        thirdList.clear();
    } else {
        currentItems = GIRLS;

        for (int i = 0; i < currentItems.length; i++) {
            SelectItem item = new SelectItem(currentItems[i]);
            thirdList.add(item);
        }
    }  
}

public String getFirstItem() {
    return firstItem;
}


public void setFirstItem(String firstItemArg) {
    firstItem = firstItemArg;
}


public String getSecondItem() {
    return secondItem;
}


public void setSecondItem(String secondItemArg) {
    secondItem = secondItemArg;
}

public String getThirdItem() {
    return thirdItem;
}


public void setThirdItem(String thirdItemArg) {
    thirdItem = thirdItemArg;
} 

The problem is that when I select a value from the second combo box (values of which were loaded dynamically), the page is reloaded (instead of ajax request being executed) and I have exception:

Exception during request processing:
Caused by javax.servlet.ServletException with message: “java.util.NoSuchElementException”

The second list is successfully updated from the first list, but after that something is wrong.

Thanks in advance!
Cheers!

Answer 1

Make sure your bean has a wider scope than Request, like Conversation scope. It looks like you’re using JSF 1.2, in this case RichFaces has a <a4j:keepAlive> tag component to elevate the scope of a managed bean from Request to View (using session variables behind the scenes). This option could be what you need. There are two ways to implement it

1. Using the tag component. This will make the bean have the “View Scope” only for this page.

   <a4j:keepAlive bean="userBean" />
   <h:form>
       <h:panelGrid columns="2">
       <!-- the rest of your code... -->
   

2. Using the tag annotation. This will make the bean have the “View Scope” on every page is used.

   @Name("userBean")
   @KeepAlive
   public class UserBean {
       //your managed bean code...
   }
   

Note: To use this tag (as component or annotation), the bean must have Request scope.