Combine ASP.net AJAX timer with javascript countdown

Question

I am currently working on porting a vb.net winforms program over to a web based version, and one of the functions in the original program has be stumped.

In the original program, every 5 minutes, a form pops up for user input. There is also a label control on the main form which counts down to the next popup. This is accomplished with a single timer control with a 1 second duration. every tick, it decrements the countdown, and when the countdown reaches 0, it pops up the form and then resets. Simple enough, but in my web app, I can't afford to be doing a postback every second, so what I am attempting is to combine a javascript countdown widget with an AJAX timer. Essentially, what should happen is that when the page loads, the countdown begins decrementing from 300 seconds, and the AJAX timer begins with a duration of 300 seconds. My idea is that when the timer ticks, it will run my function, as well as reset the countdown to 300 seconds again.

My problem, is that I am not able to reset the countdown with the code that I have, and I know that I am doing something (likely very simple) wrong, but I don't know enough Java to know what.

If I hardcode the Timer var to 300, the countdown works, and the timer ticks (fires the additional functons), but the countdown just keeps counting down (into negative numbers). How do I reset the countdown variable from code behind?

Here is the countdown function

    var Timer = <%= CountDown %>;

    function updateClock() {

        // Update Countdown
        Timer -= 1;
        var TimerMin = Math.floor(Timer / 60);
        var TimerSec = Timer - (TimerMin * 60);
        TimerSec = (TimerSec < 10 ? "0" : "") + TimerSec;
        var TimerFormat = TimerMin + ":" + TimerSec;

        // Update the countdown display
        document.getElementById("javaCountdown").firstChild.nodeValue = TimerFormat
    }

Here is the body code

<body onload="updateClock(); setInterval('updateClock()', 1000 )">

And the Code Behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Countdown = 300
End Sub

PProtected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer1.Tick
    Countdown = 300
    'Additional Functions
End Sub

Answer 1

This solution uses jQuery.

<script>

    var intervalSecond = null;
    var interval5minutes = null;

    $(document).ready(function() {

      // enable both intervals
      enableIntervals();

      // onsubmit event for your form
      $("#popupForm").submit(function() {

         // hide the form again
         $("#popupForm").css("display", "none");

         // enable intervals again.
         enableIntervals();
      });
    });

    function enableIntervals() {

      // every second interval
      intervalSecond = setInterval(function() {
        $("#updateMeEverySecond").html(new Date());
      }, 1000);

      // every 5 minutes interval
      interval5minutes = setInterval(function() {

        // display form and shut off the interval timers
        $("#popupForm").css("display", "block");
        clearInterval(intervalSecond);
        clearInterval(interval5minutes);
      }, 5 * 60 * 1000);
    }


</script>

<div id="popupForm" style="display:none;">
  <form>
    <input type="text" />
  </form>
</div>
<label id="updateMeEverySecond">Test</label>

Combine ASP.net AJAX timer with javascript countdown

Question

1 answers

solution1
0 2012-10-16 21:32:24

Combine ASP.net AJAX timer with javascript countdown

Question

1 answers

solution1 0 2012-10-16 21:32:24

solution1
0 2012-10-16 21:32:24