AJAX error occurs when using jQuery on the iPad

function updateCart()
{
var data = {
 json: $.toJSON({
 text:'some text',
 array: [1, 2,'three'],< br /> 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+"]");
 }
});

}

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) {< br /> next = requests.shift();
 updateCart(next);
 }
 }
 });
};

< p>There is a problem in one of our production web applications, but it is limited to iPad / iOS8.

Basically, in our application, users click the images representing different products to Add to his shopping cart. When the image is tapped, the product is “selected” and an ajax asynchronous call is made; this call updates our shopping cart. Each asynchronous call lasts 5-10 seconds.

When the user clicks multiple times in sequence, the problem occurs (but only on the iPad, not on the Chrome desktop, etc.). Then, the nth ajax call fails with “error 0”. Note: When one has been executed , We cannot prevent the second ajax call (as some answers suggest) because the shopping cart will not update correctly.

I tracked this behavior in the jsFiddle example, you can find it here Find:

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 does this happen (and why, obviously only on iPad/Safari)?

As mentioned in other answers, you should have a queue to handle these requests, and make sure to process them in the order of creation:

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();< br /> updateCart(next);
 }
 }
 });
};

This website seems to give you insight into an available event The number of connections, you can test it on the iPad http://www.browserscope.org/?category=network

I ran it myself and mentioned 17 maximum connections, but I am also curious about your use The network of these iPads, if it is slow, such as 3G or Edge, then these connections may be restored soon. I tested my iPad on Wifi and couldn’t reproduce your error on the violin. Hope this helps at least diagnose Question.