The Disturbed Buddha

Simple Observations of a Self-proclaimed Novice

Controlling the ASP.NET Timer Control with JavaScript

Have you ever wanted to control your <asp:Timer> control from client-side code?

Let’s say you’ve named your timer ‘Timer1’. The first step is to create a reference to this component:

    var timer = Sys.Application.findComponent(‘<%= Timer1.ClientID %>’);

Or, better yet, use the $find() shortcut:

    var timer = $find(‘<%= Timer1.ClientID %>’);

You can then easily access the timer’s interval and enabled properties, as well as start and stop the timer.

    //returns the timer’s interval in milliseconds: 
    var waitTime = timer.get_interval;       

    //sets the timer’s interval to 5000 milliseconds (or 5 seconds): 
    timer.set_interval(5000);       

    //returns whether or not the timer is enabled: 
    var isTimerEnabled = timer.get_enabled();       

    //disables the timer: 
    timer.set_enabled(false);       

    //starts the timer: 
    timer._startTimer();       

    //stops the timer: 
    timer._stopTimer();

For the more adventurous of you who would like to look at the client-side behavior code for the Timer control and who elected to download the source code for the AJAX Control Toolkit, you can probably find the .js file at:

Drive:\Program Files\Microsoft ASP.NET\AJAX Control Toolkit\AJAXControlToolkit\Compat\Timer\Timer.js

(If you don’t know what you are doing, do not make any changes to this file!)

About these ads

November 26, 2007 - Posted by | Ajax, ASP.NET, Javascript, Web Development

8 Comments »

  1. It would be more helpful if you provided info about how to add a timer control at the client side thorugh java script. But this is a great effort as well. Thanks

    Comment by Nachiket | January 24, 2008 | Reply

  2. Nachiket:

    Thanks for the feedback. The ASP.NET AJAX Timer control is a server control which cannot be added via Javascript. However, it’s behaviors can be controlled via client-side script, which is what the article addressed.

    If you want a purely client-side timer solution, look at the Javascript window.setInterval() method.

    Comment by disturbedbuddha | January 24, 2008 | Reply

  3. You have saved me loads of time. Thank you very much for your feed and valuable effort.

    Comment by Des | July 16, 2009 | Reply

  4. Perfect, thank you

    Comment by guest | April 19, 2010 | Reply

  5. All is accurate and on business. It is well written, I thank.

    Comment by bariforun | January 19, 2011 | Reply

  6. This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url…..

    http://mindstick.com/Articles/2bd1d5f5-3c79-4ba3-a3fc-0b58f3a262a8/?Ajax%20Toolkit%20Timer%20Control%20in%20ASP.Net

    Thanks

    Comment by Tanuj Kumar | January 4, 2012 | Reply

  7. nice… you can try this also…
    http://www.alltechmantra.com/2013/12/how-to-use-timer-control-in-asp.html

    Comment by Shubh | December 5, 2013 | Reply

  8. One thing to add to this – if you put the timer inside an update panel to make an automatic refresh, every time the panel refreshes the timer will be recreated with the properties from the server control. So if you want to modify the timer in JavaScript you’ll need to do it after every ajax refresh not just once.

    Comment by Tim | February 7, 2014 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: