I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8.
Here is the code:
$.ajax({
type: "GET",
url: "http://api.domain.org/api/campus?filtertype=name&filter="+ escape($('#campus').val()),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#results').children().remove();
var arrayd = (typeof result) == 'string' ? eval('(' + result + ')') : result;
if (arrayd != null) {
for (var i = 0; i < arrayd.length; i++) {
$('#results').append('<li>' + arrayd[i].SchoolName + '</li>');
}
}
},
error: function (request, status, errorThrown) {
alert("There was an issue with the request");
} // When Service call fails
});
The main issue is that the alert pops up, but there is no traffic shown in the IE Debugging tools, making it difficult to determine if the server is being reached.
I've attempted several solutions:
- Adjusting $.ajax settings as mentioned in this article
- Setting '$.support.cors = true;' before making the ajax call
- Using 'jquery.iecors.js'
Update:
After changing the dataType to 'jsonp', I can now see traffic in IE 8/9 with successful calls. However, the success method isn't being triggered in any browser.
$.ajax({
type: "GET",
url: "http://api.athletesinaction.org/api/campus?filtertype=name&filter="+ escape($('#campus').val()),
dataType: "jsonp",
async: false,
contentType: "application/javascript",
crossDomain: true,
jsonpCallback: 'myTest',
success: myTest,
error: function (request, status, errorThrown) {
alert(errorThrown);
} // When Service call fails
});
function myTest (argument) {
alert("YEAH");
$('#results').children().remove();
var arrayd = (typeof result) == 'string' ? eval('(' + result + ')') : result;
if (arrayd != null) {
for (var i = 0; i < arrayd.length; i++) {
$('#results').append('<li>' + arrayd[i].SchoolName + '</li>');
}
}
}