...

View Full Version : Using a javascript countdown timer within an asp.net ajax application



greg.young
04-05-2012, 03:41 PM
After spending hours trying to work out what's going on within my app, I have discovered there's a problem with my code that sets a javascript interval.

Here is my code that sets the interval...


Sys.Application.add_load(function PageLoad(sender, args) {

var timer = $("#lbTimer");
var intVal = "";
var verifiedTime = Date.parse(timer.html());

if ($("#imgLock").hasClass("hidden") && !isNaN(verifiedTime) && verifiedTime != null) {

$("#imgLock").addClass("hidden");
$("#imgUnlock").removeClass("hidden");

intVal = setInterval(function () {
$("#lbTimer").html(function () {
var t = parseInt((new Date() - verifiedTime) / 1000, 10);
t %= 3600;
var m = Math.floor(t / 60);
var s = Math.floor(t % 60);

if (m == 0 && s == 0) {

$("#lbLocked").removeClass("hidden");
$("#imgLock").removeClass("hidden");
$("#imgUnlock").addClass("hidden");
$("#lbTimer").html("");
window.clearInterval(intVal);
verifiedTime = "";
} else {
if (s == 0) {
$(this).html((m + ":0" + s).replace("-", ""));
} else {
$(this).html((m + 1 + ":" + s).replace("-", ""));
}

if (s > -10) {
if (m == -1) {
$(this).html($(this).html().replace(":", ":0"));
} else {
$(this).html($(this).html().replace("-", "0"));
}
} else {
$(this).html($(this).html().replace("-", ""));
}
}
});
}, 1000);

$("#lbTimer").removeClass("hidden");
});


Now this works absolutely fine if there a fullpage reload. Problem is that I'm developing an ajax enabled website and everything updates within an updatepanal.

The problem I'm encountering is that when the updatepanel panel updates a new javascript interval is being created so another counter is being added into #lbTimer resulting in a flicker between 2 or more countdown timers.

Obviously as the script is running on each pageload there's no way of clearing the interval that's already running on the page that I can see, which is resulting in multiple timers.

I did add in the following, whic solved the problem for a while, however I need the timer to update again on partial pageloads.


if (!args.get_isPartialLoad()) {
//Timer code here
}


Does anyone have any suggestions or recommendations how I can use a javascript countdown timer in my app allowing me to clear the interval to create a new one on partial page loads?

Hopefully I've given enough detail, but I can add more if required.

Thanks in advance for time and help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum