Batch Remote List JS

JQuery plugin for remote list batch processing via ajax.

Screenshot of generated form and some processed data:

Install via npm

You can install it via npm

npm i batch-remote-list-js

Usage

Insert jQuery

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Then insert BatchRemoteList js file

<script src="/your/path/to/js/batch-remote-list-js/jquery.batch-remote-list.js"></script>

Add translation file if you need

<script src="/your/path/to/js/batch-remote-list-js/i18n/ru.js"></script>

Place container for the form and configure batch process

<div id="batch-process-container"></div>

<script>
	$("#batch-process-container").BatchRemoteList({
		
		// ajax URL for getting total number of elements
		// you can omit this by directly setting count value, e.g. "total_count: 100"
		// 
		// otherwise expected response is JSON: 
		//    status: bool
		//    count: int
		//    message: string (error message)
		// 
		// id={itemID} param is added to the request (starting item ID) e.g. /ajax/list/count?id=1
		// 
		// e.g. if you use SQL on backend:
		// you should append SQL rule something like "AND table_id >= {itemID}" to get proper items count
		
		ajax_url_count: '/ajax/list/count',
		
		// ajax URL for processing items
		// 
		// id={itemID} param is added to every request (starting item ID) e.g. /ajax/list/item?id=1
		// 
		// again, if you use SQL on backend:
		// script should append SQL rule something like "AND table_id >= {itemID}" to load an item from list
		//
		// expected response is JSON: 
		//    status: bool, 
		//    item: { id: int, whatever_you_like: mixed } (depends on your callbacks settings but it must contain "id"), 
		//    message: string (error message)
		//
		// if everything goes well, response.item.id + 1 is requested as next item
		// this repeats until the whole list is processed or limit is hit (when it's non-zero value)
		// also you can stop the script whenever you like by pressing the stop button
		
		ajax_url_item: '/ajax/list/item',
		
		// configure callbacks
		// default behavior is to print response to console
		callbacks: {

			// called if response JSON response.status is true and response.item is set
			// returned result is appended to result container
			item_process: function(item){
				// for example:
				return '<div class="item">' + 
					'<div class="name">#' + item.id + ' - ' + item.name + ': </div>' + 
					'<div class="status">' + item.some_status + '</div>' + 
				'</div>';
			},
			
			// called if response JSON response.status is false
			// you can use response.message to print error message
			item_error: function(response){
				// for example:
				return '<div class="item err">' + 
					'<div class="name">' + 
						(response.item ? '#' + response.item.id + ' - ' + response.item.name :  'Unknown item') + 
					': </div>' +
					'<span class="item-msg">' + (response.message || 'Unknown error') + '</span>' + 
				'</div>';
			}

		}
	});
</script>

Here is the list of default options you can override via constructor like in example above (for single instance) or via $.BatchRemoteList.setDefaults (applied to all instances)

// default css classes
classes: {
	// you can set your own classes or use css rules to adjust the look
	form: 'bp-form',
	table : 'bp-form-table',
	td_label : 'bp-form-label',
	td_input : 'bp-form-input',
	submit_container: 'bp-form-submit-container',
	result_container: 'bp-result',
	list_container: 'bp-container-list',
	stats_container: 'bp-stats',
	finish_stats: 'bp-finish-stats'
},
// localized messages
messages: {
	start_process : 'Start',
	stop_process : 'Stop',
	start_from_id : 'Start from ID',
	limit_process : 'Limit',
	process_stopped : 'Batch process stopped',
	finish : 'Finish',
	start_time : 'Start time',
	error : 'Error',
	unknown_error : 'Unknown error',
	data_count_empty : 'Data empty (items were not found)',
	data_count_total : 'Items total',
	data_process_left : 'Items left',
	ajax_fail : 'Remote resource failed',
	limit_exceeded : 'Limit exceeded',
	item_not_found : 'Item was not found',
	data_process_success: 'Items done',
	data_process_failed: 'Items failed'
},
// backend URLs
ajax_url_count: '/ajax/batch-remote-list/count',
ajax_url_item:  '/ajax/batch-remote-list/item',
// time in ms to wait before calling another item request (throttle)
request_throttle: 500,
// set "item_process" and "item_error" callbacks
callbacks: {}