I have countdown in my .container2 div but when I tried to reload that specific container its reload perfectly but my countdown didn't showed up and also button got disabled..
<div id="container2">
<h4 id="title">Type Data here</h4>
<div class="controls">
<div class="main-controls">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" id="btnCounter" disabled >
File <span id="count"></span>
</button>
<div class="dropdown-menu">
<button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">
Save
</button>
</div>
</div>
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");
var count = 3; // Set count
var timer = null; // For referencing the timer
(function countDown() {
// Display counter and start counting down
spn.textContent = count;
// Run the function again every second if the count is not zero
if (count !== 0) {
timer = setTimeout(countDown, 1000);
count--; // decrease the timer
} else {
// Enable the button
btn.removeAttribute("disabled");
}
}());
function refreshDiv() {
$('#container2').load(window.location.href + " #container2");
}
You call countDown() function only init time that's the issue. on button click call again countDown() function !
Try this code it's help you
var count = 3; // Set count
var timer = null; // For referencing the timer
function countDown() {
// Display counter and start counting down
console.log(document.getElementById("count"), 'count');
document.getElementById("count").textContent = count;
// Run the function again every second if the count is not zero
if (count !== 0) {
timer = setTimeout(countDown, 1000);
count--; // decrease the timer
} else {
// Enable the button
document.getElementById("btnCounter").removeAttribute("disabled");
}
}
countDown();
function refreshDiv() {
$('#container2').load(location.href + " #container2");
document.getElementById("btnCounter").setAttribute("disabled", true);
count = 3;
setTimeout(() => {
countDown();
}, 10); // set page reload time in timeout
}
what are you trying to do? is it something like this?
when reload button is pressed, reload div also function inside div? so countdown function execute again?
hope this help, and give you clue.
var spn = $("#count")
var btn = $("#btnCounter")
var myInterval
var count = 3 // Set count
var timer = null
// set interval without delay
function setIntervalImmediately(func, interval) {
func();
return setInterval(func, interval);
}
function countDown(sec){
myInterval = setIntervalImmediately(function () {
$('#count').text(sec--);
if (sec == -1) {
clearInterval(myInterval);
$('#count').text("");
btn.removeAttr("disabled");
}
else{
btn.attr("disabled", "disabled")
}
}, 1000);
}
$(document).on("click", "#txt-btn", function(){
clearInterval(myInterval);
refreshDiv()
})
function refreshDiv(){
$("#container2").load(location.href + " #container2");
countDown(count)
}
$(document).ready(function(){
countDown(count)
})<div id="container2">
<h4 id="title">Type Data here</h4>
<div class="controls">
<div class="main-controls">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>
File <span id="count"></span>
</button>
<div class="dropdown-menu">
<button id="txt-btn" class="dropdown-item">
Save? do u mean reload?
</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>