jQuery $.ajax Not Working in IE8 but it works on FireFox & Chrome
Solution 1
I would comment out the contentType and add dataType: "json"
from http://api.jquery.com/jQuery.ajax/
dataType: The type of data that you're expecting back from the server.
contentType: When sending data to the server, use this content-type.
you are specifying that you are sending json, but you are not - maybe this is the issue?
Solution 2
I also have encountered a somewhat similar problem with $.ajax() (jquery v1.4.2). It's not working in IE8, whereas in Firefox it's working.
However, I've noticed from the IE8 debug toolbar that my page is in quirks mode. So, I forcefully make it to work in standard mode by inserting this doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
. Suddenly the $.ajax() works!
I don't really understand about quirks/standard mode but the word "standard" somehow feels closer to Firefox or Chrome, rather than IE. So that's how I got the idea.
@see http://en.wikipedia.org/wiki/Quirks_mode
Solution 3
Most of the time IE-specific parse errors are caused by extra commas. For example, [1, 2, 3,]
is valid in FF but not in IE. Anyway, you should paste in the JSON response, it is impossible to tell the problem without that.
Sam3k
I am a front-end developer with 14 years of experience building UI for the web. I am passionate about building user interfaces with great user experiences and keep up with all the latest technologies. Currently using Node.js, React.js & SASS/CSS; but have used other popular frameworks in the past such as Angular, Backbone & Marionette. I reside in New York City and on my spare time I travel, ride motorcycles, play guitar and drums & learn hang gliding.
Updated on July 09, 2022Comments
-
Sam3k almost 2 years
I have the following ajax call which works perfectly in Firefox and Chrome but not IE:
function getAJAXdates( startDate, numberOfNights, opts ) { var month = startDate.getMonth() + 1; var day = startDate.getDate(); var year = startDate.getFullYear(); var d = new Date(); var randNum = Math.floor(Math.random()*100000000); $.ajax({ type : "GET", dataType : "json", url : "/availability/ajax/bookings?rand="+randNum, cache : false, data : 'month='+month+'&day='+day+'&year='+year+'&nights='+numberOfNights, contentType : 'application/json; charset=utf8', success : function(data) { console.log('@data: '+data); insertCellData(data, opts, startDate); }, error:function(xhr, status, errorThrown) { console.log('@Error: '+errorThrown); console.log('@Status: '+status); console.log('@Status Text: '+xhr.statusText); } }); }
I know for a fact that all the variables are passing the right content and $.ajax is indeed passing all the paramater/values.
This is what I get on error:
LOG: @Error: undefined LOG: @Status: parsererror LOG: @Status Text: OK
I'm aware of the cache issue on IE and implemented a random paramater to clear it up.
Here is the JSON i get back (i'm able to see it using Charles)
{ "availability":[ { "inventory_id":"5", "booking_id":"21", "start_date":"05-01-2010", "number_nights":4, "text":"deFrancisco, Martin - $500.00 ACTIVE", "type":"BOOKING" } ] }
Finally these are the headers that are sent back from the backend:
header('Content-Type: application/json; charset=utf8'); header("Cache-Control: no-cache"); header("Expires: 0"); header('Access-Control-Max-Age: 3628800'); header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
Any ideas?