JQuery $ .ajax request gets an incorrect response in Internet Explorer

Question

I have problems with ajax json and Internet Explorer requests. In particular, ajax requests are not behaving correctly.
I use:
OpenCart 1.5.3.1
JQuery-1.7.1.min.js
Jquery-u-1.8.16.custom.min.js
Internet Explorer 9
PHP 5.2.9

This is the request function:

function addToCart(product_id, quantity, option_id, option_value) { quantity = typeof(quantity) != 'undefined' ? quantity : 1; option_value = typeof(option_value) != 'undefined' ? option_value : 0; option_id = typeof(option_id) != 'undefined' ? option_id : 0; jQuery.ajax({ url: 'index.php?route=checkout/cart/add', type: 'post', cache: false, data: 'product_id=' + product_id + '&quantity=' + quantity + '&option_id=' + option_id + '&option_value=' + option_value+'&rnd=' + Math.random(), dataType: 'json', success: function(jsonObj) { $('.success, .warning, .attention, .information, .error').remove(); if (jsonObj['redirect']) { location = jsonObj['redirect']; } if (jsonObj['success']) { $('#notification').html('<div class="success" style="display: none;">' + jsonObj['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); $('.success').fadeIn('slow'); $('#cart-total').html(jsonObj['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); } } }); } 

PHP return function:

 {"success":"Added to cart!","total":"1 product(s) - 52,48\u043b\u0432."} 

All this works fine in Chrome, FF, etc., but doesn't work in IE.

In fact, IE does not fire the Success event.
The only way to get the answer is through an error handler.
Then the json object has status = 200 and statusText = OK

This is the json object after the event of the event fired in Chrome:

 jsonObj: Object success: "Added to cart!" total: "1 product(s) - 52.48." __proto__: Object 

From which the values ​​of "success" and "total" are used.

This is a json object after the error event has been handled in Internet Explorer:

ReplyText is a string containing the current source of the html page.

I tried with jQuery.ajaxSetup({cache: false}); but the result is the same.

Has anyone had this problem? Or any tips?
I have no more ideas.

Answer 1

try using an absolute url for url: 'index.php?route=checkout/cart/add'

the problem is that your answer is html or xml (I see the start tag (namespace tag) of the xml page, followed by a new line, followed by the (old) html start tag).

jQuery is expecting json. Thus, this is a parsing error, leading to a return error message about the expected success.

Verify that the backend is sending the correct information and that the page being called is right. You can use the network tab to capture calls to find your problem.

Answer 2

The way I worked on all mods is to use

 $('base').attr('href') 

with code, so ajax for your code will be (small exerpt)

  option_value = typeof(option_value) != 'undefined' ? option_value : 0; option_id = typeof(option_id) != 'undefined' ? option_id : 0; var base = jQuery('base').attr('href'); jQuery.ajax({ url: base + 'index.php?route=checkout/cart/add', type: 'post', 

This has the advantage of always being a full URL and working regardless of whether you use HTTP or HTTPS

Answer 3

I don't like having unnecessary things that run on every boot, as Jay Guildford suggested. Use this instead:

 if ($.browser.msie) { $.ajaxPrefilter(function (options, originalOptions, jqXHR) { options.url = $('base').attr('href') + options.url; }); }