CODEWITHSUNDEEP
jqueryajaxjsoninternet-explorer-8
aDvo
aDvo

Reputation: 904

IE8 and Jquery .post ajax call not working

The below ajax call submits form data and receives feedback from a server as a json encoded object/array. Works on IE10, and the latest versions of FF and Chrome.

Does not work in IE8. Using IE8 developer tools i could see the json array was actually returned from my server to my browser. However at the line with the "$.each" statement it completely skips that loop, as if there was no data in the ajax response.

Does anyone know what the issue is? I read other forums some suggested using datatype = json, but not sure how to fit that in my code. Others suggested changing .post to .ajax. But i dont' want to make changes before i actually understand why IE8 is failing at this.

$.post( "<?php echo Router::url(array('controller'=>'Bookings','action'=>'saveBooking_ajax')); ?>", $( ".reservationform" ).serialize(), function() {

            })
                .done(function(data) {

                    parseddata = JSON.parse(data); 

                    //IE8 totally skips this next part even if parseddata has data
                    $.each(parseddata, function(key, value) {
                        if (key == "status") status = value;
                        if (key == "message") message = value;
                        if (key == "failuretype") failuretype = value;
                        if (key == "bookingref") bookingref = value;
                    });

example of return response from server:

 {"status":true,"failtype":"USER","message":"","timeslots":[[{"18:00:00":"6:00 pm"},{"18:10:00":"6:10 pm"},{"18:20:00":"6:20 pm"},{"18:30:00":"6:30 pm"},{"18:40:00":"6:40 pm"},{"19:20:00":"7:20 pm"},{"19:30:00":"7:30 pm"},{"19:40:00":"7:40 pm"},{"20:20:00":"8:20 pm"},{"20:30:00":"8:30 pm"},{"20:40:00":"8:40 pm"}]]}

ANSWERED USING @BARMAR ANSWER

I've changed the code to use the "json" parameter as part of my .post call.

I believe this automatically parses the return as a json object, hence I did not have to call JSON.parse(data) in the done() function anymore. JSON.parse(data) does not work in IE8 anyway. Note that i did not try using "$.parseJSON()" as suggested by Barmar.

            //parseddata = JSON.parse(data);

Also I then accessed the return object variables directly as suggesed:

            status = data.status;
            message = data.message;
            failtype = data.failtype;
            timeslots = data.timeslots;

This seems to work in most cases. But does not work in IE8 for variable "Status"! because the variable "status" has for some reason on page load been typed as a string with no value, and cannot be passed the value of data.status which is a true non-string boolean value. Hence variable "status" remains as "". Other variables seem fine.

This is strange because this works on other modern browsers, the variable "status" is already typed as an empty string "", and despite data.status = true, it somehow successfully assigns the value to "status", giving variable "status" the string version of the boolean value "true".

Sorry if this is long winded, but despite IE8s inability to a pure boolean value to a string variable, I think i should just stop using "status" as a variable name for the fact that somewhere unknown its already being typed and initialized as "".

See debug screen in firefox where var "status" is mysteriously pre-typed as an empty string. The same shows in IE.

enter image description here I also realized i should be declaring variables within the callbacks using "var". Not using var had resulted them in getting being of global scope and were holding the same values from previous callbacks.

Anyway, I'm marking this question as answered as the original question has been answered.

Upvotes: 1

Views: 3179

Answers (1)

Barmar
Barmar

Reputation: 780889

I don't think IE8 has JSON.parse(). Use $.parseJSON(). Or specify the datatype argument to `$.post:

$.post("url", $(".reservationform").serialize, "json")
    .done(function(parseddate) {
        status = parseddata.status;
        message = parseddata.message;
        failuretype = parseddata.failuretype;
        bookingref = parseddata.bookingref;
});

You also don't need to use $.each() to read the values out of the data. It's a Javascript object, just access the properties directly.

Upvotes: 3

Related Questions