CODEWITHSUNDEEP
javajavascriptjqueryjsp
MChan
MChan

Reputation: 7162

Return a list using JQuery

I am using the following JQuery, JSP and Controller to return list of cities upon changing the country drop down menu on my app JSP page, yet I think the dataType, success parameters in the JQuery are not correct as I am not getting back the list. So can someone please tell me what I am doing wrong here and how I can get the list of Cities to add them to the cities drop down menu upon changing the Country drop down menu?

Thanks for your time

<script type="text/javascript">
    function loadCity(){
            var countryData="countryId="+$(country).val();
            $.ajax({
                type: "POST",
                url: "LoadCities.htm",
                data:countryData,
                dataType: "javascript",
                success: function(cities){
                    loadCities(eval(cities))
                }
            });
        }

        function loadCities(citiesLst){
            clearCitiesDD();
            for(var i=0;i<citiesLst.length;i++){
                var city=citiesLst[i];
                appendCity(city.id,city.value);
            }
        }

        function clearCitiesDD(){
            $('#cityDD').find('option').remove();
        }

        function appendCity(id,cityName){
            $('#cityDD').append($("<option id='"+id+"'>" + cityName + "</option>"));
        }
        }            
</script>

and in my application controller I have the following code:

@RequestMapping(value = "/LoadCities.htm", method = RequestMethod.GET)
public @ResponseBody
List<City> getCityByCountryID(HttpServletRequest request, HttpServletResponse response) 
        throws Exception {

List<City> list=
icitys.getCitiesByCountry(Long.parseLong(request.getParameter("countryID")));
return list;        
}

and in the JSP file I have the following City and country drop down menus:

<tr>
    <td align="right">Country</td>
    <td align="left">
        <select id ="country" name="country" onchange="loadCity()">
            <option  value="0">--select--</option>
            <c:forEach var="countrylst" items="${countriesList}">
                <option  value="${countrylst.id}">${countrylst.countryName}</option>
            </c:forEach>
        </select>
    </td>
</tr>   
<tr>
    <td align="right">City</td>
    <td align="left">
        <select id="cityDD" name="cityDD">
            <option  value="0">--select--</option>
        </select>       
    </td>
</tr>

Upvotes: 0

Views: 1990

Answers (2)

I.P
I.P

Reputation: 93

Hope you got solution after changing $(country) to $('#country').

One more thing, you put dataType as "javascript" but avail data types are xml, json, script, or html.

Better try with html.

Good luck.

Upvotes: 2

Scary Wombat
Scary Wombat

Reputation: 44834

Should 

var countryData="countryId="+$(country).val();

not be

var countryData="countryId="+$('#country').val();

Upvotes: 0

Related Questions