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

Posted by Sam3k on Stack Overflow See other posts from Stack Overflow or by Sam3k
Published on 2010-04-27T14:21:30Z Indexed on 2010/04/27 14:23 UTC
Read the original article Hit count: 841

Filed under:
|
|
|
|

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.

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');

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON