This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes JSF and the fly likes JSF drop down change using javascript and ajax Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "JSF drop down change using javascript and ajax" Watch "JSF drop down change using javascript and ajax" New topic
Author

JSF drop down change using javascript and ajax

ruchi thakur
Greenhorn

Joined: Jun 28, 2007
Posts: 11
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
Ranch Hand

Joined: Nov 03, 2001
Posts: 626

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

Joined: Nov 03, 2001
Posts: 626

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

Joined: Jun 28, 2007
Posts: 11
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
Greenhorn

Joined: Jun 28, 2007
Posts: 11
Ok. I am using jboss 4.0.5 server.
Regards,
ruchi thakur
Greenhorn

Joined: Jun 28, 2007
Posts: 11
Please suggest, if will not be able to change a select box values using javascipt in jsf.
Regards,
Reena
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: JSF drop down change using javascript and ajax