Display loading image when AJAX call is in progress

When you send AJAX request to fetch the long list of data from the server then it may take some time to process your request and return.

During this case, at the user end, there is no change is being displayed and it doesn’t know either its request is in progress or not. If the user is on the slow network then its take some more time.

You can display a loading Text message on the screen or show an image loader.

In this tutorial, I show you How to display loading image when you are making AJAX request. But you can do the same with Text message.

Display loading image when AJAX call is in progress


Contents

  1. beforeSend and complete
  2. .ajaxStart() and .ajaxComplete()
  3. Conclusion

1. beforeSend and complete

beforeSend

This executes before AJAX request is called.

Syntax –

$.ajax({
 ...
 beforeSend: function(){
  // Statement
 }
 ...
});

complete

This executes when AJAX request is finished whether it successfully callback or not.

Syntax –

$.ajax({
 ...
 complete: function(){
  // Statement
 }
 ...
});

Example

Create a script which sends AJAX request when button click to search entered value in MySQL Table.

Show loading image on beforeSend and hide it in complete.

<script type='text/javascript'>

$(document).ready(function(){
 
 $("#but_search").click(function(){
  var search = $('#search').val();

  $.ajax({
   url: 'fetch_deta.php',
   type: 'post',
   data: {search:search},
   beforeSend: function(){
    // Show image container
    $("#loader").show();
   },
   success: function(response){
    $('.response').empty();
    $('.response').append(response);
   },
   complete:function(data){
    // Hide image container
    $("#loader").hide();
   }
  });
 
 });
});
</script>

<input type='text' id='search'>
<input type='button' id='but_search' value='Search'><br/>

<!-- Image loader -->
<div id='loader' style='display: none;'>
  <img src='reload.gif' width='32px' height='32px'>
</div>
<!-- Image loader -->

<div class='response'></div>

2. .ajaxStart() and .ajaxComplete()

This is another form which you can use.

.ajaxStart()

Same as beforeSend it executes before AJAX request is being sent.

Syntax –

$( selector ). ajaxStart( function() {
 // Statement
});

.ajaxComplete()

Executes when AJAX request finished same as complete it also doesn’t depend whether it’s successful or not.

Syntax –

$( selector ). ajaxComplete( function() {
 // Statement
});

Example

Using ajaxStart to show the loader image and ajaxComplete for hiding.

$(document).ajaxStart(function(){
 // Show image container
 $("#loader").show();
});
$(document).ajaxComplete(function(){
 // Hide image container
 $("#loader").hide();
});

3. Conclusion

It is a good idea to show loader on the screen when you are fetching large content from your server. By this, the user knows he/she need to wait otherwise it try to send request another time if it doesn’t see any changes on the screen.

You can use anyone of the form (beforeSend, complete or ajaxStart,ajaxComplete) they work the same way.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *