Question

I have two forms (‘table’ and ‘fields’). The ‘fields’ form is supposed to pre-populate with options depending on the choice made in ‘table’, by making an Ajax request.
The data is returning perfectly and actually prepopulates the second form (like it should) if I pass a cut-and-paste example of some returned data to a local variable (see commented line).But for some reason it won’t work on the returned object??
Any advice would be appreciated as I am very new to JavaScript and am probably missing something blatantly obvious! I am using the following code:

$(document).ready(function() {
$('select#table').change(function(){
$.getJSON("/ajax_get",{id: $(this).val(), ajax: 'true'}, function(data) {
//var data = [{"optionValue":"address", "optionDisplay": "address"},{"optionValue":"latitude", "optionDisplay": "latitude"},{"optionValue":"longitude", "optionDisplay": "longitude"},];
  var $persons = $('#fields').empty();
  $.each(data, function() {
    $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
  });
});
});
});

Answer 1

Here’s a simplified version of your call that should help you figure it out quickly:

$.getJSON("/ajax_get",{id: $(this).val(), ajax: 'true'}, function(data) {
  try { 
       typeof(data.somethingYouExpect);
       /* do your on success work here */
  } catch (e) {
     alert('There is a good chance the response was not JSON');
  }
});

Even when using the regular jQuery $.ajax call, it’s important to check to be sure the returned response is in the form you expect. This is as simple as setting a variable like success in your response as true. If you did that, the above example becomes something like this:

var jqxhr = $.getJSON("/ajax_get",{id: $(this).val(), ajax: 'true'}, function(data) {
  try { 
       typeof(data.success); // Will throw if success is not present
       if (success == true) {
             /* handle success */
       } else {
             /* handle a request that worked, but the server said no */
       }
  } catch (e) {
     /* The actual HTTP request worked, but rubbish was returned */
     alert('There is a good chance the response was not JSON');
     console.dir(jqxhr.textResponse);
  }
});

Here, we remember the object returned by the $.getJSON call (which is just a shortcut to $.ajax), which allows us to view the actual response sent by the server. I’m willing to bet it’s a 404, parser error or something of that sort.

For most things, I usually just use $.ajax mostly out of personal preference, where the error callback passes the xhr object to a common function to examine (did the request return 200? etc). If something explodes, I know exactly what went wrong by briefly looking at the console and can disable debug output in one place.