Return a list using JQuery

Question

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>

Have you checked the response in the console to make sure it's in the format you're expecting? — Rory McCrossan
– Rory McCrossan, Commented Aug 22, 2013 at 8:13
@RoryMcCrossan Checked the response in firebug and didn't get anything :( Does this mean that my code is correct?! — MChan
– MChan, Commented Aug 22, 2013 at 8:16
No, it means your getCityByCountryID in JSP is not returning anything. — Rory McCrossan
– Rory McCrossan, Commented Aug 22, 2013 at 8:18
@RoryMcCrossan no I am 100% positive it returns and I've tested it return result from the Controller class, the problem is that the data returned from getCityByCountryID is not displayed in the JSP — MChan
– MChan, Commented Aug 22, 2013 at 8:42
That's correct. You'll probably need to loop through the list and write each record to the HTML output. Alternatively you could use a JSON encoder, assuming JSP has one? — Rory McCrossan
– Rory McCrossan, Commented Aug 22, 2013 at 8:46

I.P · Accepted Answer · 2013-08-22 10:12:59Z

2

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.

answered Aug 22, 2013 at 10:12

I.P

938 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scary Wombat · Accepted Answer · 2013-08-22 08:26:59Z

0

Should

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

not be

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

answered Aug 22, 2013 at 8:26

Scary Wombat

44.9k6 gold badges38 silver badges67 bronze badges

5 Comments

MChan Over a year ago

it is already var countryData="countryId="+$(country).val(); shall i change country to #country?

Scary Wombat Over a year ago

That is what I am suggesting. Unless some code is missing then the jquery lookup for the country element does not look correct.

MChan Over a year ago

I've posted all code I have here. FYI it was already country without the # as shown in the code I pasted in my question

Scary Wombat Over a year ago

I mean to say to change it to var countryData="countryId="+$('#country').val(); Maybe also put an alert of some debugging to confirm that you are sendind the right value

Scary Wombat Over a year ago

Hmm, strange I gave you the correct answer 2 hours earlier than they accept answer - why?

Collectives™ on Stack Overflow

Return a list using JQuery

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related