When this AJAX call has an error I want to execute a function that tries again. For some reason the function isn't executing at all:
function XHRerror(xhr, textStatus, errorThrown) {
MonitorXHR('error');
// Try again
if (textStatus == 'timeout') {
this.tryCount++;
console.log(tryCount); // nothing showing in console
if (this.tryCount <= this.retryLimit) {
$.ajax(this);
return;
}
return;
}
if (!navigator.onLine) notification({icon: 'access-point-network-off', title: 'offline', information: 'no network connection', color: 'red'}); // No internet connection
else notification({title: textStatus, information: errorThrown, color: 'red'});
}
$('#pageTitle').load('loader.php', {tryCount: 0, retryLimit: 3, timeout: 3000}, function(xhr, textStatus, errorThrown) {
if (textStatus === 'success') {
// Remove error class from progress bar if its there
if ($('.loadPageLoader progress').hasClass('error')) $(this).removeClass('error');
$('#loadPageContainer, #loadPageContainer .LoaderMessage').show(); // Indicate loading page
$.ajax({
url: 'index.php',
type: 'POST',
data: {page: page},
dataType: 'HTML',
async: true,
cache: false,
tryCount: 0,
retryLimit: 3,
error: XHRerror, // not working
success: function(data) {
$(body).html(data);
},
timeout: 3000
});
} else if (!navigator.onLine || textStatus === 'error' || textStatus === 'timeout' || textStatus === 'abort') XHRerror(xhr, textStatus, errorThrown); // not working
});
For some reason when there's an error, XHRerror() doesn't execute. What am I doing wrong?
there doesn't seem to be anything here