I am currently working on creating a queue of ajax calls that need to be executed in order. The process seems to be functioning properly, but I am encountering an issue when there is an error in one of the calls. My goal is to stop the queue after an error occurs so that the remaining ajax calls are not executed.
As someone who is new to the concept of jquery queues, I came across this code online for extending jQuery:
var ajaxQueue = $({});
(function($) {
$.ajaxQueue = function(ajaxOpts) {
// keep track of the original complete function
var oldComplete = ajaxOpts.complete;
// queue our ajax request
ajaxQueue.queue(function(next) {
// create a complete callback to trigger the next event in the queue
ajaxOpts.complete = function() {
// trigger the original complete if it existed
if (oldComplete) oldComplete.apply(this, arguments);
next(); // run the next query in the queue
};
// execute the query
$.ajax(ajaxOpts);
});
};
// I also added this in an attempt to clear the queue
$.clearQueue = function(ajaxQueue) {
ajaxQueue.clearQueue();
ajaxQueue.stop();
};
})(jQuery);
Then, I have a function to add an item to the queue:
function queueAjax( passObj, success, ajaxQueue ) {
$.ajaxQueue({
url: route() + 'global_fxns/ajaxHub',
async: true,
data: {'passme' : encodeURIComponent( JSON.stringify( passObj ) ) },
success: function(data) {
var aJSON = decodeURIComponent(data);
var retObj = $.parseJSON(aJSON);
// if there were no issues, call the specified success function
success( passObj, retObj );
},
error: function ( jqXHR, textStatus, errorThrown) {
clog("error");
// trying to clear the queue if there's an error
ajaxQueue = $({});
$.clearQueue(ajaxQueue);
}
});
Finally, to make a call to queueAjax:
var arr = standardAjaxArray( "testQueue", 0 );
var obj1 = {
arr: arr,
count: 1
};
function success( passObj, retObj, ajaxQueue ) {
clog("Queue success!");
}
queueAjax( obj1, success );
The challenge I'm facing is that no matter what I try, I am unable to empty the queue if there's an error in the ajax call. Even when intentionally introducing an error on the backend and calling queueAjax multiple times, it runs every time. I've attempted extending jQuery with $.clearQueue and passing the queue as a parameter with no success. Any advice or suggestions would be greatly appreciated. Thank you!