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.

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.

  Laravel ajax get Request Example From Scratch

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

<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 :

  PHP Send HTML Email File Attachment Using PHPs mail

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.   Bootstrap Toggle switch example
  2.   PHP Contact Form Send Email File Attachment Example
  3.   Ajax File Upload without refreshing using jQuery and PHP
  4.   jQuery Check Uncheck All Checkbox Examples
  5.   Simple Autocomplete Combobox in jQuery
  6.   Ajax Autocomplete Search using jQuery with PHP MySQLi
  7.   Laravel 6 Inserting & Updating Eloquent Models
  8.   Class 'App\Providers\View' not found in Laravel
  9.   jQuery Check Uncheck All Checkbox Examples
  10.   Laravel 6 Inserting & Updating Eloquent Models

Leave a Reply

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