JSF drop down change using javascript and ajax

[ruchi thakur]

Hello All,

I am veryyyy newwww to JSF. I would really appreciate any help on the issue that i am facing. My requirement is as follows.
I have 2 Select Boxes (SelectOneMenu),
country and state. On the change of country, i want to filter the state select box. These values of state are to be picked updynamically from database, everytime country changes. I am using ajax for the same, so that the whole page does not refresh again. For using ajax, i am calling the javascript function changeSelBox().
changeSelBox() - This js function gets the values from database(using ajax), and then empties the state select box(using js), and populate it again with the new state code(using js).
In my browser i am also able to see new state codes in the state select box.
But after this if i click the submit button, using h:command button, my method register does not gets called, and the jsf page refreshes again.
Below are the few snippets from my jsf code
<h:commandButton value="#{msg.submit}"
action="#{registrationBean.register}" />

<h:selectOneMenu id="country" onchange="changeSelBox();" value="#{registrationBean.person.country}" >
<f:selectItems value="#{registrationBean.country_code}"/>
</h:selectOneMenu>

<h:selectOneMenu id="state" value="#{registrationBean.person.state}" >
<f:selectItems value="#{registrationBean.state_code}"/>
</h:selectOneMenu>

Please suggest if i am doing something wrong or needto proviode more information.

Thanks and Regards,
Ruchika

[Jignesh Patel]

Though I am not AJAX/JSF expertise, it is hard to tell whats wrong as code looks fine.

Can you please develop a seperate jsp without state change code and try to submit page.

Also do try to see your servers log file. You didn't mention what server are you using?

[Jignesh Patel]

Just forget to mention there are some issues of using </h:selectOneMenu> appropriatly.

[ruchi thakur]

Thanks Jignesh.
Ok , let us not think about ajax for a while. I removed the ajax part from the js function changeSelBox()
I changes my function changeSelBox() to as shown below. In this I am only removing the select box option values and then refilling them with some hardcoded state values. If this simple js function is called on country change, this also give a problem on SUBMIT. My observation is that whenever js function alter registerForm:state_code select box values, submit stops working. Though it goes to server, but action method registrationBean.register is not called Please suggest.

function changeSelBox()
{
while (document.registerForm.elements["registerForm:state_code"].options.length > 0)
{
document.registerForm.elements["registerForm:state_code"].remove(0);
}
var countryName="2121"
var countryId="12"
var option = document.createElement("OPTION");
option.text="Ohio";
option.value="1";
document.registerForm.elements["registerForm:state_code"].add(option);

var option = document.createElement("OPTION");
option.text="Albany";
option.value="2";
document.registerForm.elements["registerForm:state_code"].add(option);
}

Regards,
Ruchika

[ruchi thakur]

Ok. I am using jboss 4.0.5 server.
Regards,

[ruchi thakur]

Please suggest, if will not be able to change a select box values using javascipt in jsf.
Regards,
Reena