populate drop-down values dynamically using Ajax

Question

Hi,

I have 3 drop-downs. 1st drop-down contains some values when the page loads. I need to populate 2 nd drop-down based on the value selected in 1st dropdown. Similarly, I need to populate 3 nd drop-down based on the value selected in 1st and 2nd dropdown.

Initially I tried like this.

 <h:selectOneMenu value="#{stu.country}" >
  <f:selectItems value="#{bean.allCountries}" />
  <a4j:support event="onchange"  action="#{bean.retrieveStates(stu.country)}"  
  reRender="states_dropDown"></a4j:support>
   </h:selectOneMenu>

//ly, for 2nd drop-down

    <h:selectOneMenu id="states_dropDown" value="#{stu.state}" >
      <f:selectItems value="#{bean.allStates}" />
    <a4j:support event="onchange"  
     action="#{bean.retrieveCities(stu.country,stu.state)}"  
     reRender="City_dropDown"></a4j:support>
       </h:selectOneMenu>

Some times this code works fine. But some times it doesn't invoke managed bean method.

Can you please help??

Answer 1

The first that comes to my mind is that you should declare the <a4j:support> with immediate="true", so that no validation errors stop the bean from being called

Also, I'm having this one (it is inside a <rich:comboBox> though):

<a4j:support event="onchange" reRender="target"
    limitToList="true" eventsQueue="targetOnchange"
    action="#{bean.action}" ajaxSingle="true"
    requestDelay="500" />

<a4j:support event="onselect" reRender="target" limitToList="true"
    action="#{bean.action}" ajaxSingle="true" />

And it works fine. I've used the 2 events, because with rich:comboBox they mean different things. Actually, I'd suggest using the comboBox in your case, it will be more user-friendly.