Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





how to Loader show / hide using ajax call?

Loader show / hide using ajax

File Name :

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

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

File Name :

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





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link