CODEWITHSUNDEEP
javascripthtmljquerycssajax
himasnhu
himasnhu

Reputation: 35

how do I refresh specific div with countdown

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");
                }

Upvotes: 0

Views: 704

Answers (2)

Mayur Vaghasiya
Mayur Vaghasiya

Reputation: 1472

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
}

Upvotes: 1

krystallix
krystallix

Reputation: 121

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>

Upvotes: 1

Related Questions