Call multiple ajax calls in sequence, rather than all at the same time

0 comments

How to call ajax against a list of things that need to be processed, one at a time, in order- assuming most useful info at the top of the list. e.g. an calc an ETA date for a given line order in a list of orders.


var errorsShown = false;
var ajaxProcessingQueue = [];  //list of things to send via ajax, one at a time
function prepareWarrantySerials() {
	var serials = $('.js-serial-number-or-list');
	for (var sc = 0; sc < serials.length  ; sc++) {
		var serialCell = $(serials[sc]);
		var row = serialCell.closest('tr');
		var editButtonCell = row.find('.js-warranty-edit-button');
		var invoiceNum = row.find('.invNum').html().trim();
		var orderNum = row.find('.orderNum').html().trim();
		var accn = row.find('.invNum').attr('data-acc').trim();
		var itemNumber = editButtonCell.attr('data-itemnumber').trim();
 
		//if hpe, ajax call to get serials. if marine, no ajax
		if (window.userCompanyID == '1') {//hpe
			//var ajaxCall = $.ajax(  //this would call all at the same time
			ajaxProcessingQueue.push({
				type: "GET",
				url: window.websiteBaseUrl + "services/get-etadate.aspx",
				dataType: "json",//expecting return json from service
				data: {
					acc: accn,
					invoiceNum: invoiceNum,
					orderNum: orderNum,
					company: window.userCompanyID,
					timeperiod: timeperiod
				},
				invokedata: {
					actionCell: editButtonCell,
					serialCell: serialCell
				},
				success: function (res) {
					$(this.invokedata.actionCell).html(res.message);
				},
				error: function (msg) {
					if (!errorsShown) {
						errorsShown = true;
						window.ErrorMessage("ajax call failed. see console ");
						console.log(msg.responseText);
					}
				}
			});
			//calls.push(ajaxCall);  //optional - used by cancelRunningAjaxCalls
		} else if (window.userCompanyID == '2') {//marine
			$(serialCell).show();
		} else {
			alert('company not supported [' + window.userCompanyID + ']');
		}
		//if(sc>5)break;  //debug
	}
}
 
 
var curAjaxCall = null;
var stopAjaxQueueProcessing = false;
function processAjaxQueue() {
	/* If there's something left in the array, send it */
	if (ajaxProcessingQueue.length > 0) {
		if (!window.ajaxError && !stopAjaxQueueProcessing) {
			/* Create ajax call and remove item from array */
			curAjaxCall = $.ajax(ajaxProcessingQueue.shift(0));
		}
	}
}
 
function jumpProcessingQueue(el) {
	stopAjaxQueueProcessing = true;//stop queue
	curAjaxCall.abort();
 
	//clear ajax spinners:
	var items = $('.etdLine');
	for (var sc = 0; sc < items.length; sc++) {
		if ($(items[sc]).html().indexOf('spinner') != -1) {
			$(items[sc]).html('<img src="' + window.websiteBaseUrl + 'images/hand-icon.png" style="pointer:hand" title="click to look up manually">');
		}
	}
 
	var dataCell = $(el).closest('tr').find('.orderNum');
	var orderNum = dataCell.attr('data-ordernum');
	var itemnumber = dataCell.attr('data-itemnumber');
	var orderdate = dataCell.attr('data-orderdate');
	//walk the queue, looking for ordernum/itemnum and execute that
	for (var sc = 0; sc < ajaxProcessingQueue.length; sc++) {
		if (ajaxProcessingQueue[sc].data.ordernum == orderNum && ajaxProcessingQueue[sc].data.itemnumber == itemnumber) {
			//put spinner back
			$(ajaxProcessingQueue[sc].invokedata.cell).html(spinner).on('click', function () {
				jumpProcessingQueue(this);
			});
			//call ajax again
			curAjaxCall = $.ajax(ajaxProcessingQueue[sc]);
 
		}
	}
}
function cancelRunningAjaxCalls() {
	if (calls.length > 0) {
		for (var scan = 0; scan < calls.length; scan++) {
			if (calls[scan] != null)
				try {
					calls[scan].abort();
					
				} catch (e) {
 
				} 
		}
	}
}
 
processAjaxQueue();

Comments


Leave a Comment