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

If I may ask, what is the purpose of this thing showing up for every 5 minutes? What user input does it take and why does it need it every 5 minutes? It seems irrelevant but this approach from a web app seems messy, and perhaps there's a much better way to do it entirely. — Snuffleupagus, Commented Oct 16, 2012 at 20:18
This is an anesthetic monitoring program. The popup every 5 minutes is to prompt the user to enter the patient's vital signs. The "popup" on the webapp is a modal popup. This is not something that is negotiable though. This is how the program works. — scholzr, Commented Oct 16, 2012 at 20:41
I set up a looping timer example for you, hopefully this should help. jsfiddle.net/yVUg8/2 — Snuffleupagus, Commented Oct 16, 2012 at 21:08
That is a better timer, but it still does not solve the issue of interacting with the code behind. Is it possible to make a call to the code behind from this rather than calling the alert box? — scholzr, Commented Oct 16, 2012 at 21:30
The code behind can't freshly paint a new form, you'd want to update the DOM with javascript. Once the modal dialog is filled out and a submit button (or however you want to do it) should use ajax to post the form. — Snuffleupagus, Commented Oct 17, 2012 at 12:33

sonjz · Accepted Answer · 2012-10-16 21:32:24Z

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>

Collectives™ on Stack Overflow

Combine ASP.net AJAX timer with javascript countdown

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related