JQuery, JSON, Spring MVC - Dynamically loading select options

Question

I have a jsp form like this... Values in the second select box, state should be loaded based on value in first select box (country),. I am using AJAX, JSON, Spring MVC to retrieve 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);
   }

JQuery part....

   <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 form the debugger that the ajax request is getting submitted to the the Spring controller and it does returns a list of State objects, which contains fields like id, name etc... Problem is that the state select options are not changing.. seems to be that function(data){....} part is not working..can someone help me where I am doing wrong here...

---Update---

I have removed everything from the callback function and just had thi..

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

even this didn't work... that mean call never reached that part...

danny.lesnik · Accepted Answer · 2011-08-25 20:56:40Z

9

I have the same code where city (cityId) values are changed according to country (countryId) selection. It works perfect:

$("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 "select" prefix.

answered Aug 25, 2011 at 20:56

danny.lesnik

18.6k31 gold badges141 silver badges206 bronze badges

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

1 Comment

RKodakandla Over a year ago

thanks for the reply.. looks like error is on server side.. used firebug to see what's happening and it throws 500 error.. Looks like it has something to do with Spring-Json formatting, I am posting new question for that..

FuSsA · Accepted Answer · 2016-06-30 19:21:22Z

Im updating your controller method to avoid an 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>

H. Pauwelyn · Accepted Answer · 2016-08-18 08:10:01Z

0

Add the below dependency to your pom.xml:

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

Finally add @ResponseBody annotation in your controller class.

edited Aug 18, 2016 at 8:10

H. Pauwelyn

14.4k28 gold badges93 silver badges164 bronze badges

answered Aug 18, 2016 at 7:58

Brahmaiah Cheeli

1

Collectives™ on Stack Overflow

JQuery, JSON, Spring MVC - Dynamically loading select options

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related