Any idea why my jQuery .ajax() function won't run the 'success' portion?

Question

I have the following code:

$.ajax({
    async: false,
    url: 'chart_data.php',
    data: {'option':'high', 'id':id},
    dataType: 'json',
    success: function(response){
        alert('in');
        var data = google.visualization.arrayToDataTable(response);
        var options= { curveType:'none', width: 300, height: 200, hAxis: {title:'Years'}, vAxis: {title:'Value'}, title: 'High Time - Low Value' };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);  
    }
});

in a webpage. I'd like the chart to display, based on a drop-down menu. The rest of the function works just fine. I checked in Firebug, and the JSON response comes through with a 200 OK status message. In fact, I can see all the JSON just fine in Firebug.

The question remains, why does the alert('in'); never get triggered, and why doesn't google load it's chart into the associated chart div?

Edit:

I get the following error when adding an error callback: parseerror SyntaxError: JSON.parse: unexpected character.

This is the JSON response from the server:

[['Year', 'Low', 'High'],['1984', 318000, 395000],['1984', 418000, 495000],
['1984', 380000, 450000],['1984', 410000, 460000],['1984', 410000, 460000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 318000, 395000],
['1985', 418000, 495000],['1985', 380000, 450000],['1985', 420000, 470000],
['1985', 420000, 470000]]

It looks correct to me, although I am not 100% certain on JSON structure.

Edit:

I have made a few changes, and it seems that I am getting a little further along. First, I removed the header('Content-type: application/json'); line from my php script. I then changed the dataType: 'json' to dataType: 'html'.

It now loads the success callback in the $.ajax() call. It doesn't like the text response when I try to send that to Google's arrayToDataTable() method.

If I can get the returned string (which looks like the above JSON response that isn't actually a JSON response) to be parsed into a javascript array, then I'd be golden. I hope.

Edit:

I ended up using an eval statement in my success callback to turn the http response into an array eval('var res = ' + response); This is probably not the best way to do this. If someone has a better (and more secure) way of doing this, that'd be great.

Edit:

I didn't really like using the eval statement, so I looked into other ways of changing the return string into an array. I didn't really care for any of them until I ran across this little gem:

response = JSON.parse(response);

This works without issue.

Thanks for everyone's assistance.

Answer 1

OK no one has answered yet so I'll give it a shot here. It looks like you've updated with an error message and the return value that you are getting from the ajax call.

The problem is that what you are receiving is not a JSON object, but rather a javascript array. JSON objects will be encased in curly brackets { and } while arrays are encased in square brackets [ and ].

You should modify the script you are calling via ajax so that it returns a proper JSON object (using json_encode in php is quite handy).

You will want your response to look more like this:

{"data":[["Year", "Low", "High"],["1984", 318000, 395000],["1984", 418000, 495000],
["1984", 380000, 450000],["1984", 410000, 460000],["1984", 410000, 460000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 318000, 395000],
["1985", 418000, 495000],["1985", 380000, 450000],["1985", 420000, 470000],
["1985", 420000, 470000]]}

According to google, they are looking for something like this:

{
   cols: [{id: 'task', label: 'Task', type: 'string'},
          {id: 'hours', label: 'Hours per Day', type: 'number'}
   ],
   rows: [{c:[{v: 'Work'}, {v: 11}]},
          {c:[{v: 'Eat'}, {v: 2}]},
          {c:[{v: 'Commute'}, {v: 2}]},
          {c:[{v: 'Watch TV'}, {v:2}]},
          {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
   ]
 }

So, perhaps you actually need to rework your data to follow this structure first? Something like this:

{
  "cols": [{"id":"year", "label":"Year", "type":"string"},
         {"id":"low",  "label":"Low",  "type":"string"},
         {"id":"high", "label":"High", "type":"string"}],
  "rows": [{"c":[{"v":"1984"}, {"v":"318000"}, {"v":"395000"}]},
         {"c":[{"v":"1984"}, {"v":"418000"}, {"v":"495000"}]},
         {"c":[{"v":"1984"}, {"v":"380000"}, {"v":"450000"}]},
         {"c":[{"v":"1985"}, {"v":"420000"}, {"v":"470000"}]}]
}

If JSON seems a bit confusing you can read more about it here: http://www.json.org/

EDIT

Considering I overlooked the .arrayToDataTable() function call, I guess I should have quoted this example from Google's documentation (link is already referenced above):

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  ['Country', 'Population', 'Area'],
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

Since your array is coming in like this:

[['Year', 'Low', 'High'],
 ['1984', 318000, 395000],
 ['1984', 418000, 495000],
 ['1984', 380000, 450000],
 ['1984', 410000, 460000],
 ['1984', 410000, 460000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 318000, 395000],
 ['1985', 418000, 495000],
 ['1985', 380000, 450000],
 ['1985', 420000, 470000],
 ['1985', 420000, 470000]]

Which appears to be properly formatted, I think you should try changing your "dataType" in your ajax call to "text" instead of "json" since you are really returning an array and not a JSON object. This should solve your problem.

Answer 2

There is an error in the formatting of your JSON, string must be double quoted (") and not single quoted (')

If you want to check that your JSOn is valid, you can use this