ASP.NET Javascript Timer

Question

Hi, I have a countdown timer in javascript that is called by a code behind using asp.net VB. I cannot find a way to keep track of the time ,.

the problem is., I cannot get the time that elapsed after postback so that the timer would continue ticking,. can you help me please,.?? I would really appreciate it.,

here is my code fragment:

asp.net VB codebehid

    on page load{
        If Page.IsPostBack = True Then
            ClientScript.RegisterClientScriptBlock(Me.GetType, "timer_script",
           "<script language='javascript'>function mySubmit()</script>")

            ClientScript.RegisterStartupScript(Me.GetType, "timer_script", 
            "<script>countdown_clock();</script>")
        End If

        If Page.IsPostBack = false Then
            TimerTxtbx.Text = "00:06:10"   'hour:min:sec -> initialize timer
            ClientScript.RegisterClientScriptBlock(Me.GetType, "timer_script",
           "<script language='javascript'>function mySubmit()</script>")

            ClientScript.RegisterStartupScript(Me.GetType, "timer_script", 
            "<script>countdown_clock();</script>")
        End If
    }

    on button click{
        NextBtn.Attributes.Add("onclick", "mySubmit()")   'call a javascript function

        ClientScript.RegisterStartupScript(Me.GetType, "timer_script", 
        "<script>countdown_clock();</script>")
    }

javascript code:

function mySubmit()
{
 document.getElementById('TimerTxtbx').removeAttribute('disabled');
}

    function countdown_clock()
{     
    var current_time;
 current_time = document.getElementById('TimerTxtbx').value;


 var hours = current_time.substring(0,2);
 var minutes = current_time.substring(3,5);
 var seconds = current_time.substring(6,8); 

 var n_seconds;
 var n_minutes = minutes;
 var n_hours = hours;

 if (seconds == 0)
 {
    n_seconds = 59;

    if (minutes == 0)
  {
  n_minutes = 59;
   if (hours == 0){
   alert('Time is up');
   return;
   }
          else{ 
          n_hours = hours - 1;
      if (n_hours < 10)
             n_hours = "0" + n_hours;
          }
         }
  else
  {
   n_minutes = minutes - 1;
   if (n_minutes < 10)
    n_minutes = "0" + n_minutes;
  }
 }
 else
 {
     n_seconds = seconds - 1;
  if (n_seconds < 10)
   n_seconds = "0" + n_seconds;
 }


      document.getElementById('TimerTxtbx').value = n_hours + ':' + n_minutes + ':' + n_seconds;

      setTimeout("countdown_clock()",1000); //function call and delay by 1sec

      document.getElementById('TimerTxtbx').setAttribute('disabled','disabled');
      }//end function

Answer 1

I think your problem is that you have to undisable the textbox when you submit, otherwise the text doesn't get tracked in the viewstate.

This code works for me:

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TimerTxtbx" runat="server" />
    <asp:Button runat="server"  OnClientClick="mySubmit()"/>
</div>
</form>

With code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(typeof (Page), "timer_script",
                                           "<script>countdown_clock();</script>");

        if (!IsPostBack)
        {
            TimerTxtbx.Text = "00:00:10";
        }
    }

Update based on yours:

The problem is that you are setting the OnClientClick property of your button in the Click event handler for your button.

This basically means it won't have any effect until the button is clicked, and then it isn't useful to you.

Set the OnClientClick somewhere like OnInit or Page_Load, or just do it in the aspx like in my example. Does this makes sense to you? When you click the button the OnClientClick property must have already been set.

If you're going to do any ASP.NET stuff, you really want to readup and really get to know the page lifecycle. Starting points:

• http://www.15seconds.com/issue/020102.htm
• http://msdn.microsoft.com/en-us/library/ms178472.aspx