Jquery S.Ajax error handler being executed if readystate=4 and status=200
I'm doing an $.ajax call, which is returning a json response and all seems fine, but instead of the success handler being invoked, the $.ajax error handler is invoked even though the readystate=4 and the status=200.
The $.ajax call is:-
$.ajax({
url: 'inc/ajax_printorder.asp',
type: "GET",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (sendresponse) {
var message = (typeof sendresponse.jsonresp) == 'string' ? eval('(' + sendresponse.jsonresp + ')') : sendresponse.jsonresp;
if (message[0].ok == '1') {
var order = window.open('', 'PrintWindow', 'width=600,height=600');
var html = '<html><head><title>Print Your Order</title></head><body><div id="myprintorder">' + $('<div />').append(message[0].msg) + '</div></body></html>';
order.document.open();
order.document.write(html);
order.document.close();
return false;
};
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
and from Firebug, the ajax response is:-
{"jsonresp":[{"__type":"sendresponse","ok":"1","msg":"<h1>Your www.sandwichlunchesnewbury.co.uk order on 02/05/2011 00:34:01</h1><p>Website order from www.sandwichlunchesnewbury.co.uk on 02/05/2011 00:34:01 from:- </p><table width="60%" style="border:1px solid blue;padding:5px;"><tr><td>Name</td><td> a </td></tr><tr><td>Phone</td><td> b </td></tr><tr><td>Email</td><td> </td></tr><tr><td>Business name</td><td> </td></tr><tr><td>Delivery address</td><td> c </td></tr><tr><td>Date food required</td><td> Monday, 02/05/2011 </td></tr><tr><td>Time food required</td><td> 10 Am </td></tr><tr><td> </td><td> </td></tr><tr><td>Just Sandwiches (standard)</td><td> </td></tr><tr><td>Just Sandwiches (gourmet)</td><td> </td></tr><tr><td>Just Baguettes (standard)</td><td> </td></tr><tr><td>Just Baguettes (gourmet)</td><td> </td></tr><tr><td>Gourmet Bread Sandwiches</td><td> 2 </td></tr><tr><td>Sausage rolls</td><td> </td></tr><tr><td>Cookie boxes</td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td>Total price</td><td> £50.00 </td></tr><tr><td> </td><td> </td></tr><tr><td colspan="2">Other info & special instructions </td></tr><tr><td colspan="2"> </td></tr></table>"}]}
Any thoughts on why its going to error rather than success?
Thanks
epx
Answer
Your response JSON is invalid, among other things, you will need to escape the double quotes (\" instead of "). You didn't post what the error text (the value of err as passed to error) is but I suspect it'll be parsererror.
I've found JSONLint to be very useful in ensuring I'm receiving/sending valid JSON.