Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
Loader show / hide
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();
});
File Name :
File Name :
File Name :
File Name :