How to add Ajax loader image in PHP?

Today, We want to share with you How to add Ajax loader image in PHP?.In this post we will show you display ‘loading’ image when ajax call is in progress, hear for How to show loader on ajax request and hide on responce we will give you demo and example for implement.In this post, we will learn about display ‘loading’ image when ajax call is in progress javascript with an example.

How to add Ajax loader image in PHP?

There are the Following The simple About jquery ajax loading image while getting the data Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery progress bar ajax response, so the some major files and Directory structures for this example is following below.

Read Also:  Laravel 6 self join table in Eloquent

PHP Laravel is a web application framework with expressive, elegant syntax.The PHP Framework for Web Artisans,freeing you to create without sweating the small things. CRUD Operation With Server Side.

When jquery an AJAX http request is sent to get a any data records from the server side then it may some take times depending on the data large of processing or the number of get a records.

Display Loading Image when AJAX call is in Progress

Show loading image on beforeSend and hide it in complete.

Read Also:  How to send mail from localhost XAMPP using PHP?

<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 Progressloader container
    $("#loader_progress").show();
   },
   success: function(response){
    $('.response').empty();
    $('.response').append(response);
   },
   complete:function(data){
    // Hide Progressloader container
    $("#loader_progress").hide();
   }
  });
 
 });
});
</script>

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

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

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

.ajaxStart() & .ajaxComplete()

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

Example: Dynamic Content Load using jQuery AJAX

HTML Menu Navigation

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$products = $db_handle->runQuery("SELECT * FROM products");
if(!empty($products)) {
?>
<div id="menu">
<?php 
foreach($products as $page) { 
?>
<input type="button" value="<?php echo $page["title"]; ?>" onClick="getPage(<?php echo $page["id"]; ?>);" />
<?php } ?>	
</div>
<?php } ?>	
<div id="display_list"></div>

jQuery AJAX Dynamic Content Loading

function getPage(id) {
	$('#display_list').html('<img src="loader_progress.gif" />');
	jQuery.ajax({
		url: "fetch_all_products.php",
		data:'id='+id,
		type: "POST",
		success:function(data){$('#display_list').html(data);}
	});
}

Getting Page Content in PHP

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$products = $db_handle->runQuery("SELECT * FROM products WHERE id = ".$_REQUEST['id']);
if(!empty($products)) {
?>
<h3><?php echo $products[0]['title'];?></h3>
<div><?php echo $products[0]['content'];?></p>
<?php } ?>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Global variable in laravel controller Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about loader is not working in ajax call.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP MySQL Column Sorting Examples
  2. Read Also:  PHP Laravel 6 Form Validation Script
  3. Read Also:  Laravel AJAX Delete Record From MySQL Table
  4. Read Also:  Multiple file upload extension validation using jQuery Validate
  5. Read Also:  Custom Pagination Using WooCommerce REST API
  6. Read Also:  Alert Toast message in Angularjs Component
  7. Read Also:  How to Show Loading Spinner in jQuery?
  8. Read Also:  Laravel 6 Inner Join Query Example - MySQL
  9. Read Also:  Alert Toast message in Angularjs Component
  10. Read Also:  Custom Pagination Using WooCommerce REST API
CLOSEX