jQuery Ajax and Chrome
Posted: Sun Jan 25, 2015 12:18 pm
It's a regular thing to have an ajax form submit items to a cart in the CGEcomm suite... until jQuery changed the rules about how best to submit the request and report on the subsequent results, especially when using Google Chrome.
jQuery now recommends using .done(), .fail() and .always() instead of, as in the past, :success, etc. OK, I can do that EXCEPT with Chrome.
For reasons of its own, even on a successful ajax submission, Chrome failed. Took a bit of research and hair-pulling to come up with the answer. Seems Chrome returns a 302 error response...
In this instance, the #prodlist contains a summary of items, each with its own add-to-cart form.
Here's what I did to compensate:
jQuery now recommends using .done(), .fail() and .always() instead of, as in the past, :success, etc. OK, I can do that EXCEPT with Chrome.
For reasons of its own, even on a successful ajax submission, Chrome failed. Took a bit of research and hair-pulling to come up with the answer. Seems Chrome returns a 302 error response...
In this instance, the #prodlist contains a summary of items, each with its own add-to-cart form.
Here's what I did to compensate:
Code: Select all
// ajax submit add to cart form and update view cart in header
$(document).on('click','#prodlist input:submit',function(e){
e.preventDefault();
var form = $(this).closest('form');
var actionUrl = form.attr('action');
var formData = form.serializeArray();
formData.push({ name: this.name, value: true });
$.ajax({
type : "POST",
url : actionUrl,
data : formData,
cache : false
})
.fail (function(jqXHR) { if ( jqXHR.status !== 302 )
alert("Item could not be added to the cart."); })
.always(function() {$('.carty li:first').load("{/literal}{cms_selflink href='updated-cart'}&showtemplate=false{literal}");return false; })
});