how to show server busy during ajax call

programming
1

Hi guys
I’m trying to figure out how to show a GIF spinner as a “busy” indicator while an ajax call is busy processing the user’s request. Can someone please help. See below my ajax call as is presently.

	$.ajax({
		url: '../logic/data/bank_stmt_maint.php',
		method: 'POST',
		data: data,
		dataType: 'json'
	}).success(function (data){
		
		console.log(data);

		if (data.success)
		{	
			data = data.data;

			var display = '';
			var t = $('#data_table').DataTable();

			t.clear().draw();

			for (var i = 0; i <= data.length - 1; i++)
			{
				var action = '';
				var option = '';
				
				if (data[i]['status'] == 0)
				{
					action = '<select class="form-control selOption" id="action_'+i+'">';
					action = action + '<option value="1">Allocate Entry</option>';
					action = action + '</select>';

					var option = '<button data-option="2" class="btn btn-green btn-sm" onclick="listAction(0,'+data[i]['id']+', this);">Go&nbsp;&nbsp;<i class="icon-caret-right"> </i></button>';
				}

				var	alloc_user = '';
				var	alloc_date = '';
				var alloc_to = '';
				
				if (data[i]['allocated_by'] != null)
				{
					alloc_to = data[i]['allocated_to'];
					alloc_user = data[i]['alloc_user_name'];
					
					if (data[i]['allocated_by'] == -1) alloc_user = 'System';
					if (alloc_user == null) alloc_user = 'Admin';
				}
				
				var status_txt = '';
				if (data[i]['status'] == 1) status_txt = 'Posted';
				
				t.row.add( [
					data[i]['stmt_hdr_id'],
					data[i]['tran_date'],
					data[i]['tran_ref_text'],
					data[i]['fmt_tran_amt'],
					status_txt,
					alloc_to,
					alloc_user,
					action,
					option
				] ).draw();
			};
		}
	});
2

I am assuming you want the spinner to stop showing when if (data.success) evaluates to true, correct? :slight_smile:

3

Yes… that’s correct. Also bear with me I’m a newbie with javascript/html/css.
Thank you.

4

The easiest way would be to toggle whether the loading indicator displays or not. Does the ajax call get triggered by a button click or something similar?

:slight_smile:

5

Hi.
Yes the function that launches the ajax call is triggered by a button click. I’ve tried to toggle the display using .show() and .hide() but get no reaction at all. The GIF shows up at the bottom left corner when the page loads but it does not do anything at the trigger point when it really matters. Here’s what I’ve done. What am I missing? Or is there a better way. Thanks

HTML SIDE

  <img src="img/ajax-loader.gif" class="img-responsive" />
</div>

<script type='text/javascript' src='plugins/datatables/jquery.dataTables.min.js'></script> 
<script type='text/javascript' src='plugins/datatables/dataTables.bootstrap.js'></script> 
<script type='text/javascript' src='plugins/datatables/TableTools.js'></script>

<script type='text/javascript' src='js/ui/bank_stmt_items.js'></script>
	
<script type="text/javascript">
	var list_type = '';
</script>

JAVASCRIPT SIDE

	function refreshList(outp) 
	{
		var data = {};
			data['action']			= 'getStmtItems';
			data['date_start']		= $('#inputStartDate').val();
			data['date_end']		= $('#inputEndDate').val();
			data['json']			= true;

		
		console.log(data);

		$('#ajax-loader').show();
		
		$.ajax({
			url: '../logic/data/bank_stmt_maint.php',
			method: 'POST',
			data: data,
			dataType: 'json'
		}).success(function (data){
			
			console.log(data);

			if (data.success)
			{	
				$('#ajax-loader').hide();
				data = data.data;

				var display = '';
				var t = $('#data_table').DataTable();

				t.clear().draw();