I have countdown in my container 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..
function refreshDiv() {
$('#container3').load(window.location.href + " #container3");
}
JavaScript
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");
var count = 2; // 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");
}
}());
this is my html code its work properly when I refresh the whole page but when I refresh #container3 my button got disabled and countdown didn't showed
<div class="container">
<div class="container1">
<h2>choose product </h2>
<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
<img src="" alt="Image Preview" id="zoom" class="image-
preview__image">
<span class="image-preview__default-text">choose image</span>
</div>
</div>
<div class="container2" id="container3">
<h4 id="title">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>
function refreshDiv() {
count = 2;
timer = null;
countDown();
}
I removed the jquery that reloads #container3 and reset your count and timer and it worked for me in a node.js http-server environment... The component refreshes on clicking save.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="container1">
<h2>choose product </h2>
<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
<img src="" alt="Image Preview" id="zoom" class="image-
preview__image">
<span class="image-preview__default-text">choose image</span>
</div>
</div>
<div class="container2" id="container3">
<h4 id="title">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>
<script>
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");
var count = 2; // 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) {
console.log(count);
timer = setTimeout(countDown, 1000);
count--; // decrease the timer
} else {
// Enable the button
btn.removeAttribute("disabled");
}
};
function refreshDiv() {
count = 2;
timer = null;
countDown();
}
countDown();
</script>
</body>
</html>