Question

I have the following JQuery code in an attempt to populate a dropdown list:

<script language="javascript" type="text/javascript">
$(function(){
    $("#setStatusDrpDown").change(function(){
    $.getJSON("getStatusChangeReasons", 
              {selectedStatusId: $(this).val(), ajax: 'true'}, 
               function(result) {
              alert("here");
              for (var i = 0; i < result.length; i++) {
              alert("hello");
              options += '<option value="' + result[i].id + '">' + result[i].changeReason + '</option>';
  }
              $("select#statusChangeReason").html(options);
        });
      });
    });
</script>

I know that the code is running because I can see my controler intercept it and even print the selectedStatusId value. What I cannot figure out is why neither of my alerts are displayed. I don’t see any errors on the javascript console. Its as if code simply quits execution after the controller. Any advice is apprecaited!

Answer 1

Your service might be throwing an error or returning something that $.getJSON can’t understand.

Important: As of jQuery 1.4, if the JSON file contains a syntax error,
the request will usually fail silently. Avoid frequent hand-editing of
JSON data for this reason. JSON is a data-interchange format with
syntax rules that are stricter than those of JavaScript’s object
literal notation. For example, all strings represented in JSON,
whether they are properties or values, must be enclosed in
double-quotes. For details on the JSON format, see http://json.org/.

http://api.jquery.com/jQuery.getJSON/

You can handle the error withe xhr return value.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });