I've got a very standard AJAX request:
$.getJSON('/products/findmatching/38647.json', {}, function(JsonData){
var tableHtml = '';
var x;
for (x in JsonData.matchingProds) {
var matchingProd = JsonData.matchingProds[x];
var buyMessage;
if ( x == 0 ) {
buyMessage = 'Buy Cheapest';
}
else {
buyMessage = 'Buy from this shop';
}
tableHtml = tableHtml + '<tr><td><img height="40" src="' + matchingProd.img_url + '" alt="' + matchingProd.name + '" /></td> \
<td><a href="' + matchingProd._page_url + '">' + matchingProd.name + '</a></td> \
<td><a href="' + matchingProd._merchant._url + '">' + matchingProd._merchant.title + '</td> \
<td align="right">£' + matchingProd.price + '</td> \
<td><a href="' + matchingProd.referral_url + '">' + buyMessage + '</a></td></tr>';
}
$('#matchingproducts tbody').html(tableHtml);
$('#loading').delay(1000).fadeOut();
});
It works fine in all browsers except IE. I don't do much in IE anymore as I have a Mac, but I've got IE8 on an XP virtual machine. Using its built-in Debug Tools hasn't really helped (they're not very good). The only thing I can fathom is that at some point I get and "Expected identifier" error.
Could this be in the JSON data that's returned? How can I examine that data from IE's point of view?
Ok I figured it out. Someone suggested trying a non-minified version of jQuery. I did this and stepped through the IE8s Javascript debugger. At a certain point, the following error came up:
Could not complete the operation due to error c00ce56e.
A little Googling found that it was the charset declaration I've set for my JSON data. In PHP, this was done with:
header ( 'Content-Type: text/javascript; charset=utf8' );
It turns out that IE is very particular about the charset reference ( http://forums.asp.net/t/1345268.aspx#2732852 ), so I changed it to:
header ( 'Content-Type: text/javascript; charset=UTF-8' );
And hey-presto, it works like a charm. Thanks for your help guys, you pointed me in the right direction again!