jQuery $.ajax Not Working in IE8 but it works on FireFox & Chrome

Question

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?

Answer 1

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.

Answer 2

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?

Answer 3

Check if your page just returns OK or if it returns 'OK'. Only 'OK' is valid JSON. Use a tool like JSONLint to check the value that comes from the request.

Answer 4

What if you simply type alert(data); or var myObject = eval('(' + data + ')'); ?

And if you call the function directly from the browser by typing on the url bar your ajax call with all the parameters in "get" (&param1=param1value&param2=...)? You should be able to read the response.

Something in JSON response is making IE crazy.

Answer 5

What version of jQuery are you using?

If you check jquery's code, parsererror is thrown when jQuery.httpData() is called. Here's the code from jquery:

if ( status === "success" ) {
  // Watch for, and catch, XML document parse errors
  try {
    // process the data (runs the xml through httpData regardless of callback)
    data = jQuery.httpData( xhr, s.dataType, s );
  } catch(err) {
    status = "parsererror";
    errMsg = err;
  }
}

Maybe jQuery.httpData() is worth looking at. That is, you can check if jQuery.parseJSON is called and if it indeed returns an object.

if ( typeof data === "string" ) {
  // Get the JavaScript object, if JSON is used.
  if ( type === "json" || !type && ct.indexOf("json") >= 0 ) {
    console.log(data); //add this
    data = jQuery.parseJSON( data );
    console.log("data parsed successfully"); //add this

Answer 6

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"&gt;. 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