title: A counter is not resetting in jQuery on a button click in Dialog Window
body: <p>I wrote a small script that will display a <a href="http://jqueryui.com/dialog/" rel="nofollow">jQuery Dialog Window</a> after so many seconds of idle time on the same page. Once this dialog opens up, I start a 30 seconds countdown from the time that the dialog opens. If the user does not click on "Yes, Keep working" button within 30 seconds then the script will automatically logs them out by simply transferring the user to the log-out page.</p>
  
  <p>The script is <strong><em>almost</em></strong> working with no problem. However, the 30 seconds countdown is not working as expected when the same dialog appears the second time on the same page. (ie. a user reaches the timeout value 2 time one the same screen "without any refresh")</p>
  
  <p>The intention is to start at 30 seconds then decrease the value by 1 every second. Moreover, when the user clicks on "Yes, Keep working" this counter should be retested to the starting point which is 30.</p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>The script is failing to reset the counter to 30 after the user click on "Yes, Keep working" button. </p>
  
  <p>Can some one please tell me why the script is not resetting the counter even though it should reset one the function <code>startTimeoutCounter()</code> is called. The function  <code>startTimeoutCounter()</code> is called everytime the page finish loading and also whenever the "Tes, Keep Working" is clicked.</p>
  
  <p>This is my JS code</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      var timer;
      var closeDialogAfter = 30;  //The default counter value
      var idleTimeOutLimit = 5; //Display the dialog after @idleTimeOutLimit seconds of idle time
      var signOutScript = 'login.php?action=logout';   //logout url
      var keepAliveScript = 'ajax/handler-keep-me-alive.php';  //php page to handle ajax request to keep the session alive
      var dialogCountdown = '#dialog-countdown';  // the lable that is used to display the counter
      var idleTimeout= '#idleTimeout';  //the div that is used for the dialog 
  
      $(function($){
  
          //start the idle time out counter
          startTimeoutCounter();
  
          $( idleTimeout ).dialog({
              resizable: false,
              autoOpen: false,
              width: 400,
              open: function(){
                  updateTimeoutCounter();
              },
              buttons: {
                  "Yes, Keep working": function(e) {
                      $.ajax({    
                          url: keepAliveScript,       
                          success: function() {
                              startTimeoutCounter();
                              $( idleTimeout ).dialog("close");
                          }
                      });
                  },
                  "No, End Session": function(e){
                      forceLogOut();
                      $(this).dialog('close');                
                  }
              }
          }); 
      });
  
  
      function startTimeoutCounter(){
          timer = closeDialogAfter;
          $(dialogCountdown).text(timer);
  
          setTimeout(function(){
              $( idleTimeout ).dialog("open");
          }, idleTimeOutLimit * 1000);
      }
  
      function updateTimeoutCounter(){
  
          console.log($(dialogCountdown).text());
  
          setTimeout(function(){
              timer = timer -1;
              $(dialogCountdown).text(timer);
              (timer &lt; 2) ? forceLogOut() :   updateTimeoutCounter();
          }, 1000);
      }   
  
      function forceLogOut(){
          window.location = signOutScript;
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>this code is where I identify the html part</p>
  
  <pre><code>&lt;div id="idleTimeout" title="Your session is about to expire!" class="box-hidden"&gt;
  
          You will be logged off in &lt;strong&gt;&lt;span id="dialog-countdown"&gt;&lt;/span&gt;&lt;/strong&gt; seconds.
      &lt;p&gt;Do you want to continue your session?&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>