Ajax error with JQuery on iPad

Question

We have a problem in one of our Production web apps, but only on iPad/iOS8.

Basically, in our application, the user is adding products to his cart, by tapping on images that represent different products. When an image gets tapped, the product is "selected" and an ajax asynchronous call is made; this call updates our cart. Each asynchronous call lasts something like 5-10 seconds.

Problem occurs (but only on iPad, not on Chrome desktop, etc.) when the user clicks many times in sequence. Then, the n-th ajax call fails with "error 0". Note: we can't block a second ajax call when one is already in execution (as some answers would suggest), because the cart wouldn't be updated properly.

I've tracked down this behaviour in a jsFiddle example you can find here:

http://jsfiddle.net/oc1ktv6u/30/

function updateCart()
{
var data = {
        json: $.toJSON({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: Math.round(Math.random()*12)
}

$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:function(response)
    {
       $(".target").append("+");
    },
    error:function(xhr, ajaxOptions, thrownError) 
    {
        alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]");
    }
});

}

My main question is:

• Why is this happening (and why, apparently, only on iPad/Safari)?

Answer 1

As the other answers have mentioned you should have a queue to handle these request and make sure they are being handled in the order they are created:

var active = false;
var requests = [];

var updateCart = function (data) {
if(active) {
    requests.push(data);
} else {
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        beforeSend: function() {
            active = true;
            //show loading on the cart symbol or something to tell the user there is a process going on, UX goodness
        },
        success : function() {
            active = false;
            if(requests.length > 0) {
                next = requests.shift();
                updateCart(next);
            }
        }
    });
};

This site seems to give some insight into the number of active connections that are available at one time and you can test it out on your iPad http://www.browserscope.org/?category=network

I ran it on my own and it mentioned 17 max connections, but I am also curious about the network you are using with these iPads, if it is slower, say on 3G or Edge, than these connect could back up rather quickly. I was testing my iPad on Wifi and was unable to reproduce your error on the Fiddle. Hopefully this helps at least diagnose the issue.