Demo of showing process message like Wait.. Done .. etc by using using JQuery

<< Return to tutorial on load()

JQuery

<script>
$(document).ready(function() {
/////
var my_timer;
$("#b1").click(function(){
$('#msg').html('Wait .. ');
$('#msg').show();
clearTimeout(my_timer); // Stop the timer to close #msg 
$('#d1').html('Backend Process started .. ');
$("#d1").load("load-delay-msgck.php", function() {
$('#msg').html('Done .. ');
my_timer = setTimeout(function() { $("#msg").fadeOut('slow'); }, 3000);
});
})
////////////////
})
</script>

CSS

<style>
#msg{
 display: none;
 position: absolute;
}
</style>

HTML

<div class="row">
  <div class="col-md-8"><div id=d1 class='alert alert-info'>Click the button to start the process</div></div>
  <div class="col-md-2"><button type="button" class="btn btn-info" id=b1>Generate</button></div><div class="col-md-2"><div id=msg class='alert alert-success'></div></div>
</div>

PHP code for the file load-delay-msgck.php

<?Php
sleep(5);
echo " Done ... ( Process Over ) ";
?>