I am pretty sure I am creating a race but I do not know how to go about fixing it… any ideas?
cheers,
$('.add-items').live('click', function(evt) {
if (evt.button != 0) return; // ignore right-click
evt.preventDefault();
var items = $(this).attr('href').substr(1).split(',');
// now items is ['G400180', 'G400181']
// Disable the link to prevent repeated orders
$(this).attr('disabled','disabled');
// Execute the orders using ajax
var remaining_requests_cnt = items.length;
for (var i = 0; i < items.length; i++) {
$.ajax({
url: '/cgi/cart.cgi?'+items[i],
success: function() {
if (--remaining_requests_cnt == 0) {
top.location.href="http://www.feelgoodlightups.com/cgi/cart.cgi?viewcart";
}
},
error: function() {
alert('Error occurred. Check the content of your cart.');
location.reload();
},
})
}
});
When I test it, only one of the items is being added to the cart. the weird thing is once the cart has a item in it, the code works fine. It is only on the initial click…
Maybe your serverside script is creating multiple carts and identifying them by setting cookies. I would view the http headers to see the data going to, and coming from that script.
I think that is what is happening, and that the best option for me it to by pass a single request and wait for the response before it makes the second request. But I am not sure how to write it correctly.
Here’s the logic to send the requests sequentially.
var items = $(this).attr('href').substr(1).split(',');
function mySuccess() {
if (items.length > 0) {
addItemToCart(items.pop());
} else {
top.location.href = 'foo';
}
}
function addItemToCart(itemId) {
//send the ajax request for itemId
// the success function should be mySuccess
}