How to create a stopwatch
I have an Ajax call. Something like that:
$(document).on('submit', '#formPropiedades', function(event) {
event.preventDefault();
var content = {}, url = "http://www.xxxxyzzz.com/xxx/yyy/web/ajax.php";
$("#dialog1").dialog("open");
var posting = $.post(url, {
im_core: 'saveAllAdds',
idFeed: <?php echo $_POST['idFeed'] ?>,
pais: <?php echo $pais1?>
}).done(function(data) {
if (data == 1)
$(".overlay-bg1").html("Suces....");
else
$(".overlay-bg1").html(data);
});
<?php } ?>
});
And my HHTML looks like this:
<div id="dialog1" title="Attention!!" style="width:60%">
<div class="overlay-bg1">Saving the Adds....</div>
</div>
Jquery Ui Dialogue opening code is as follows
$(function () {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "",
duration: 1000
},
});
});
I want to show a timer in POPUP that should start when the Ajax call is made and stop when I receive a response. It should look like a stopwatch
+3
source to share
3 answers
<div class="timer"></div> //put this div where you want to show the timer
<input type="button" onClick="fireAJAX();"> // firing ajax call
Then in your function fireAJAX()
function fireAJAX()
{
var counter = 0;
var interVal = setInterval(function () {
$('.timer').html(++counter);
}, 1000);
//Start timer and append the counter to 'timer' div every second
$.ajax({
type : "POST",
url : URL,
success : function(response){
clearInterval(interVal );
// stop the counter after ajax response
}
});
}
So every time you call the function fireAJAX
, the timer starts at 1
+3
source to share
$(document).on('submit', '#formPropiedades', function (event) {
event.preventDefault();
var content = {},
url="http://www.xxxxyzzz.com/xxx/yyy/web/ajax.php";
var setTimer = setInterval(function(){ //start your timer
var d = new Date();
document.getElementById("myDivID").innerHTML = d.toLocaleTimeString();//give the id of your div
},1000);
$("#dialog1").dialog("open");
var posting = $.post(url, {
im_core:'saveAllAdds',
idFeed :<?php echo $_POST['idFeed'] ?>,
pais:<?php echo $pais1?>
}).done(function (data) {
clearInterval(clearInterval); //stop your timer
if(data==1)
$(".overlay-bg1").html("Suces....");
else
$(".overlay-bg1").html(data);
});
<?php } ?>
});
+1
source to share