jQuery Ajax and Chrome

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

jQuery Ajax and Chrome

Post by psy »

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:

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

});
Locked

Return to “Tips and Tricks”