skip to Main Content

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

2

Answers


  1. 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
    }
    
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search