JQuery, JSON, Spring MVC - dynamically load selected options

Question

I have a jsp form, such as ... The values ​​in the second selection field, the state should be loaded based on the value in the first selection field (country). I use AJAX, JSON, Spring MVC to get the results.

index.jsp .....

<form:form name="myform" modelAttribute="search" action="POST"> <form:input path="firstName" class="text" /> <form:input path="lastName" class="text" /> <form:select path="country" id="country"> <form:option value="" label="--Choose A Value--"></form:option> <form:options items="${countryList}" itemValue="id" itemLabel="name"></form:options> </form:select> <form:select path="state" onchange="javascript:itemFocus('submit');" id="state"> <form:option value="" label="--Choose A Value--"></form:option> <form:options items="${stateList}" itemValue="id" itemLabel="description"></form:options> </form:select> <form:checkboxes items="${skillsList}" path="skills" itemLabel="description" itemValue="id" delimiter="<br>" /> <form:checkboxes items="${languagesList}" path="languages" itemLabel="description" itemValue="id" delimiter="<br>" /> </form:form> 

controller....

  @RequestMapping(value="stateslist.html") public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){ return stateService.getStates(countryId); } 

Part of jQuery ....

  <script type="text/javascript" charset="utf-8"> function getStates(){ $.getJSON( "stateslist.html", {countryId: $('#country').val()}, function(data) { var html = ''; var len = data.length; for(var i=0; i<len; i++){ html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('#state').append(html); } ); } $(document).ready(function() { $('#country').change(function() { getStates(); }); }); </script> 

I can see the debugger that the ajax request is sent to the Spring controller, and it returns a list of State objects that contains fields such as id, name, etc. The problem is that the option state choices do not change .. it seems that the function(data){....} not working. Can someone help me where I am doing wrong here ...

--- Update ---

I removed everything from the callback function and just did thi ..

 function(data){alert("something");} 

even that didn’t work ... it means the challenge never reached this part ...

Answer 1

I have the same code where the values ​​of city (cityId) vary depending on the country (countryId). It works great:

 $("select#countryId").change(function(){ $.getJSON("getCityList.do",{countryCode: $(this).val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].id + '">' + j[i].name + '</option>'; } $("select#cityId").html(options); }); }); 

So I think you just need to add the "select" prefix.

Answer 2

I am updating your controller method to avoid 406 Not Acceptable error:

 @RequestMapping(value="stateslist.json") @ResponseStatus(HttpStatus.OK) public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){ return stateService.getStates(countryId); } 

and your jQuery part:

 <script type="text/javascript" charset="utf-8"> function getStates(){ $.getJSON( "stateslist.json", {countryId: $('select#country').val()}, function(data) { var html = ''; var len = data.length; for(var i=0; i<len; i++){ html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('select#state').append(html); } ); } $(document).ready(function() { $('#country').change(function() { getStates(); }); }); </script> 

Answer 3

Add the following dependency to your pom.xml :

 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.5.0</version> </dependency> 

Finally add the @ResponseBody annotation to your controller class.