AJAX HTML Javascript jQuery PHP Example MORE Videos New

How to Display Loading Image or loader when AJAX call is in Progress


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.

  

$.ajax({
 ...
 complete: function(){
  // Statement
 }
 ...
});
<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>


Warning: Undefined variable $article_id in /var/www/html/st/includes/get_article.php on line 9

Fatal error: Uncaught mysqli_sql_exception: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 6 in /var/www/html/st/includes/get_article.php:9 Stack trace: #0 /var/www/html/st/includes/get_article.php(9): mysqli_query() #1 /var/www/html/st/ajax/loading-image-ajax.php(142): include('...') #2 {main} thrown in /var/www/html/st/includes/get_article.php on line 9