I'm having an issue with some users of a web application which makes a number of AJAX calls to update a backend database. Users will enter/scan in a new barcode and when they tab out of the field it will call the AJAX request to silently update the database via a PHP page.
This works 99% of the time but on occasions users are reporting that they get this error message:
There was an error updating the Product Barcode - AJAX Request error. HTTP Status: 0
Here's the script in question:
$(document).ready(function() {
$(".form-control.barcode").change(function() {
var recid = $(this).closest('td').attr('id');
var barcode = $(this).val();
$this = $(this);
$.post('updateProduct.php', {
type: 'updateProduct',
recid: recid,
barcode: barcode
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating the Product Barcode - ' + ajaxError + '. Please contact the IT Help Desk';
$this.closest('td').addClass("has-error");
$("#productBarcodeErrorMessage").html(errorAlert);
$("#productBarcodeError").show();
return; // stop executing this function any further
} else {
$this.closest('td').addClass("has-success")
$this.closest('td').removeClass("has-error");
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating the Product Barcode - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the IT Help Desk';
$this.closest('td').addClass("has-error");
$("#productBarcodeErrorMessage").html(ajaxError);
$("#productBarcodeError").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
So it looks like the AJAX request is failing and it's returning an HTTP Status of 0 which doesn't sound like a valid HTTP status (I would expect a 4xx or 500 etc HTTP Status). I'm not sure what the 0 value represents and how I can go about locating the exact cause of this issue?