spring ajax json - dynamic drop down select

I have following script. This script is inside a JSP which has Country, State and Cities combo-boxes populated one after the other (cascade selection)

 The script is suppose to fetch the data from the controller and populate list of states for the country selected. The function is called alert("inside ajax") is displayed and calls the controller method too. The controller fetches the list of states sucessfully and returns the list of states as "Set". when the control is passed back to the json alert("received data") doesnot pop up and nothing happens after that. There are no errors displayed too. 

I have "json-lib-2.4-jdk15.jar" in my library. Do I need any more settings? or what is that I'm missing?

The jason java script is as below

 <script type="text/javascript">
     $(document).ready(function() { 
         $('#countryName').change(
         function() {
             alert("inside ajax");
             $.getJSON('${findStateURL}', {
                 countryName : $(this).val(),
                 ajax : 'true'
             }, function(data) {
                 alert("received data");
                 alert(data);
                 var html = '<option value="">State</option>';
                 var len = data.length;
                 alert(len);
                 for ( var i = 0; i < len; i++) {
                     html += '<option value="' + data[i].name + '">'
                          + data[i].name + '</option>';
                     alert(html);
                 }
                 html += '</option>';
                 $('#states').html(html); 
             });
         }); 
    });

controller method I'm calling is

@Controller
    public class CountryController {

        @Autowired
        private CountryService countryService;
         @RequestMapping(value = "/getStates.htm", method = RequestMethod.GET)
         @ResponseBody public 
        Set<State> StatesForCountry(
         @RequestParam(value = "countryName", required = true) String countryName, Map<String, Object> map) {
         System.out.println("countryName " + countryName);
         System.out.println("Country Id ");
         List<State> states = countryService.getAllStates(countryName);
         Set<State> state_set = new HashSet<State>(states);
         System.out.println(" no. of states set = " + state_set);
         return state_set;
         }

The controller is returning the values as desired in the 'set'. But only problem is that I don't receive any data at alert("received data");

Answers


After reindenting the code because we are not machines :

$(document).ready(function() { 
$('#countryName').change(
     function() {
         alert("inside ajax");
         $.getJSON(
            '${findStateURL}',
            {
                 countryName : $(this).val(),
                 ajax : 'true'
             }, 
             function(data) {
                 alert("received data");
                 alert(data);
                 var html = '<option value="">State</option>';
                 var len = data.length;
                 alert(len);
                 for ( var i = 0; i < len; i++) {
                     html += '<option value="' + data[i].name + '">'
                     + data[i].name + '</option>';
                     alert(html);
                 }
                 html += '</option>';
                 $('#states').html(html); 
            }
        );
    }
 ); 
});

If I read the API Doc : if the JSON file contains a syntax error, the request will usually fail silently.

I suggest you to get the JSON returned by your Controller (via Firebug by example) and put your JSON in an online validator. Maybe you will find an error.


Need Your Help

AngularJS: ng-model-options bind form value on Submit doesn't work with multiple selections

angularjs data-binding options angular-ngmodel

I have a form with three radio buttons, and deferred binding to model on click of submit. Live example here

960 Grid Alignment Issue

html css layout 960.gs

Im having trouble when it comes to the 960 grid. the code below depicts the layout that i want to use, i.e. 6 containers evenly spread.