# how to show server busy during ajax call

**URL:** https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122
**Category:** programming
**Created:** [September 3, 2017, 11:37pm UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122 "2017-09-03T23:37:38Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![imesco](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/imesco/32/8657_2.png) [@imesco](https://forum.kirupa.com/u/imesco)
#### Post date: [September 3, 2017, 11:37pm UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122/1 "2017-09-03T23:37:38Z")

</div>

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();
			};
		}
	});
```

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 3, 2017, 11:42pm UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122/2 "2017-09-03T23:42:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![imesco](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/imesco/32/8657_2.png) [@imesco](https://forum.kirupa.com/u/imesco)
#### Post date: [September 4, 2017, 12:16am UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122/3 "2017-09-04T00:16:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 4, 2017, 3:30am UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122/4 "2017-09-04T03:30:56Z")

</div>

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?

🙂

---

<div class="post-metadata">

### Author: ![imesco](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/imesco/32/8657_2.png) [@imesco](https://forum.kirupa.com/u/imesco)
#### Post date: [September 4, 2017, 10:26am UTC](https://forum.kirupa.com/t/how-to-show-server-busy-during-ajax-call/637122/5 "2017-09-04T10:26:35Z")

</div>

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

```auto
  <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

```auto
	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();

```