form selec tag, partial update

Hi everyone,

I have a spring form in one of my page.

in the form, there are two spring:select, one for State and one for Cities.
when we selects one particular state from the state dropdown(select tag 1), the Cities select items must be updated with the list of city belonging to the selected state. I want to do this partial update using Ajax.

am using Spring MVC 3.0.2, Hibernate, Tiles. I don't know how to use this Ajax in spring MVC

I tried many links, and found many solutions. they include solutions using webflow, json and Ajax, etc but not able to follow of those solution. they all are either using webflow or using maven. am not familiar with maven.
am confused which one to follow. could any one suggest and explain me the best solution?

thanks.

I will place my controller code below:

Code:

---

package xcom.controller;

import BeanManager.EmployeeManager;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import services.EmployeeServices;
import xcom.dao.CityService;
import xcom.dao.OfficeService;
import xcom.dao.StateService;
import xcom.model.City;
import xcom.model.Employee;
import xcom.model.Phone;

@Controller
public class EmployeeController {

    private OfficeService officeService;
    private StateService stateService;
    private EmployeeServices employeeServices;
    private CityService cityService;

    @Autowired
    public void setOfficeService(OfficeService officeService) {
        this.officeService = officeService;
    }

    @Autowired
    public void setStateService(StateService stateService) {
        this.stateService = stateService;
    }

    @Autowired
    public void setCityService(CityService cityService) {
        this.cityService = cityService;
    }

    @Autowired
    public void setEmployeeService(EmployeeServices employeeServices) {
        this.employeeServices = employeeServices;
    }

    @InitBinder
    public void initBinder(WebDataBinder binder) {
        SimpleDateFormat dateFormat = new SimpleDateFormat("MM/dd/yyy");
        dateFormat.setLenient(false);
        binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, false));
    }

    @RequestMapping("emp/newEmployeeForm.htm")
    public ModelAndView newEmployeeForm() {       
        ModelMap map = new ModelMap();
        map.addAttribute("e", employeeServices.getEmployeeManager());
        map.addAttribute("citiesList", cityService.getAllCities());
        map.addAttribute("statesList", stateService.getAllState());
        map.addAttribute("officeList", officeService.getAllOffice());
        return new ModelAndView("newEmployeeForm", map);
    }

    @RequestMapping("emp/listEmployee.htm")
    public ModelAndView listEmployee() {
        List<Employee> empList = employeeServices.getEmployeeDao().getAllEmployee();
        return new ModelAndView("listEmployeePage", "empList", empList);
    }
}

---

and the form is here, I have highlighted the two select tag where I need help:

Code:

---

<style>
    div.ui-datepicker, .ui-datepicker td{
        font-size:10px;
    }
</style>

<div id="ss">
    <form:form action="saveEmployee.htm" commandName="e"> 

        <table >
            <tr>
                <td colspan="2" style="border: none; background: none">
                    <table style="border: none">               
                        <tr>
                            <th style="font-size: 14px;" colspan="4">New Employee Registration</th>                       
                        </tr>
                        <tr>
                            <th style="text-align: right">First Name:</th>
                            <td ><form:input size="15" path="employee.firstName"/></td>
                            <th style="text-align: right">Date of Birth:</th>
                            <td ><form:input size="15" path="employee.dateOfBirth" class="datepicker"/></td>
                        </tr>
                       
                        <tr>
                            <th style="text-align: right">Last Name:</th>
                            <td ><form:input size="15" path="employee.lastName"/></td>
                            <th style="text-align: right">Designation:</th>
                            <td>
                                <form:select path="empType">
                                    <form:option value="1">empType1</form:option>
                                    <form:option value="2">empType2</form:option>
                                    <form:option value="3">empType3</form:option>
                                </form:select>
                            </td>               
                        </tr>                       
                    </table>
                </td>
            </tr>
            <tr>
                <td rowspan="2" style="border: none; background: none">
                    <table style="border: none">
                        <tr>
                            <th colspan="4" style="text-align: left">Address</th>                       
                        </tr>
                        <tr>
                            <th style="text-align: right">House No:</th>
                            <td ><form:input size="15" path="employee.residence.houseNumber"/></td>
                        </tr>
                        <tr>
                            <th style="text-align: right">Street Name:</th>
                            <td><form:input size="15" path="employee.residence.streetName"/></td>
                        </tr>
                      <tr>
                            <th style="text-align: right">State:</th>
                            <td>
                                <form:select name="state" id="state" items="${statesList}" itemLabel="state" itemValue="id" path="addressStateId"/>
                            </td>
                        </tr>
                        <tr>
                            <th style="text-align: right">City/Town:</th>
                            <td >
                                <form:select id="cities" items="${citiesList}" itemLabel="city" itemValue="id" path="addressCityId"/></div>
                            </td>               
                        </tr>
                    </table>
                </td>
            </tr>
           
            <tr >
                <th style="text-align: center;padding: 5px;" colspan="2"><input type="submit" name="acti" value="save" /></th>
            </tr>
        </table>
    </form:form>           
</div>

---