I feel like I should be able to find this anwser but have had zero success after hours of research. I have this page with a simple jquery ajax calls to a API service. It works fine in Chrome, Safari, and Firefox, and even IE 10. But IE 9 and 8 seem to fail.
Here's the code:
$.ajax({
type: "GET",
url: ";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 biggest issue is that the alert files, but I can't see any traffic in the IE Debugging tools which doesn't help me see if I even hit the server.
I've tried a number of things:
- Setting $.ajax setting per /
- Setting '$.support.cors = true;' before the ajax call
- Using 'jquery.iecors.js'
Update
After changing the dataType to 'jsonp' I started seeing the traffic in IE 8/9 with successful calls. However, I'm not getting any browser to call the success method now.
$.ajax({
type: "GET",
url: ";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>');
}
}
}
I feel like I should be able to find this anwser but have had zero success after hours of research. I have this page with a simple jquery ajax calls to a API service. It works fine in Chrome, Safari, and Firefox, and even IE 10. But IE 9 and 8 seem to fail.
Here's the code:
$.ajax({
type: "GET",
url: "http://api.domain/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 biggest issue is that the alert files, but I can't see any traffic in the IE Debugging tools which doesn't help me see if I even hit the server.
I've tried a number of things:
- Setting $.ajax setting per http://mvcdiary./2013/01/16/jquery-ajax-request-not-working-in-ie9/
- Setting '$.support.cors = true;' before the ajax call
- Using 'jquery.iecors.js'
Update
After changing the dataType to 'jsonp' I started seeing the traffic in IE 8/9 with successful calls. However, I'm not getting any browser to call the success method now.
$.ajax({
type: "GET",
url: "http://api.athletesinaction/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>');
}
}
}
Share
Improve this question
edited Oct 24, 2013 at 16:57
AGarrett
asked Oct 23, 2013 at 20:29
AGarrettAGarrett
791 gold badge1 silver badge8 bronze badges
6
-
Why are you
eval
ing the JSON? What happens if you useJSON.parse()
instead? What does the JSON response look like? What console errors are you getting in IE? – user2736012 Commented Oct 23, 2013 at 20:40 - You should be using the [data] property on the ajax call to specify query parameters. Also, try jsonp. – jonosma Commented Oct 23, 2013 at 20:41
- IE8 and IE9 do not support XHR2, meaning to send a CORS request you must use a different XHR. jQuery doesn't provide that support, therefore you'll have to do it yourself or install a plugin that does it for you. setting cors support to true is absolutely useless, there's never a case in a desktop browser where you'll want to do that. – Kevin B Commented Oct 23, 2013 at 20:44
-
OP shouldn't need JSONP or CORS since the request is being sent to the same domain. Though it's a different sub-domain, so
document.domain = "athletesinaction";
may be needed. – user2736012 Commented Oct 23, 2013 at 20:46 - It is a cross-origin request, therefore CORS/jsonp is needed unless you can get around it with document.domain. – Kevin B Commented Oct 23, 2013 at 20:49
2 Answers
Reset to default 3Try changing the dataType
to jsonp
.
Though the service will need to support this type of request.
Yes, it's not works in IE8.
If you need to support IE8, take JSONP or postMessage, or bination of both.