JSON is undefined in IE7 - asp.net

Question

It works fine in chrome, firefox and IE8. But comes up an error on IE7. Here is my jquery onchange event.
$('select#NationId').change(function () {
var nationId = $(this).val();
$.ajax({
url: 'LoadAreas',
type: 'POST',
data: JSON.stringify({ nationId: nationId }),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$('select#AreaId').get(0).options.length = 0;
$('select#AreaId').append('<option value="0">Select All</option>');
$.each(data, function (val, Areas) {
$('select#AreaId').append('<option value="' + Areas.Id + '">' + Areas.Name + '</option>');
});
}
});
});
controller
[HttpPost]
public ActionResult LoadAreas(int nationId)
{
var _Areas = (from c in SessionHandler.CurrentContext.ChannelGroups
join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
where cgt.Name == "Area" && c.ParentChannelGroupId == nationId
select new AreaName() { Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);
if (_Areas == null)
return Json(null);
List<AreaName> managers = (List<AreaName>)_Areas.ToList();
return Json(managers);
}

Answer 1

The issue is that the JSON object is not available in IE 7. You'll want to include JSON2.js on your page for IE < 8 users.

Answer 2

If the browser doesn't implement the JSON object, you can always use a third-party library to provide it for you. If I recall correctly, this particular implementation is widely used and defers to the browser, so you just need to drop it in, no tweaking required.

Answer 3

Shouldn't
data: { "nationId": nationId },
just work?

Answer 4

$('select#NationId').change(function () {
var nationId = $(this).val();
var data = '{"nationId": "' + nationId + '"}';
$.ajax({
url: 'LoadAreas',
type: 'POST',
data: data ,
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$('select#AreaId').get(0).options.length = 0;
$('select#AreaId').append('<option value="0">Select All</option>');
$.each(data, function (val, Areas) {
$('select#AreaId').append('<option value="' + Areas.Id + '">' + Areas.Name + '</option>');
});
}
});
});