Saturday, October 06, 2007 1:42 AM codeblock

AJAX: How to control an <asp:Timer> on client-side

Often I ask myself why it does not exist a way to control the status of a timer control on client-side. The Timer is a client-side control, incapsulated as IScriptControl into a server-control, but its use is focused in raise asyncronous postbacks without the intervention of the user. But it is simply uncontrollable. After you set its interval and enable it on server side it is impossible to stop it on the client without raise a postback.

This is a bad thing in my opinion. There was a bunch of cases when you may have the need to stop/start the timer responding to a client event. So I decided to analyze the inner working of the control to find a way to solve this issue. And here is the result of my work.

Suppose to have a Timer oin a page, side by side with a Checkbox thats need to start/stop the temporized postback. The first step is to find a reference to the client component representing the Timer.

var timer = $find('<%= timer.ClientID %>');

the $find() function simply enumerate all the components registered into the page and returns the instance to the caller. Now here is how to write an event handler for the click event of the checkbox to enable/disable the timer:

var chkEnabled = $get('chkEnabled'); chkEnabled.onclick = function() { var timer = $find('<%= timer.ClientID %>'); timer.set_enabled(chkEnabled.checked); if (timer.get_enabled()) timer._startTimer(); else timer._stopTimer(); }

You may think to have simply to set/reset the enabled property, but watching at the timer client code you may see that this property is not directly linked with the start/stop of the timer. It is only a property to acquire the value of the server control property, like always happen with the IScriptControls. So you have to manually call the _startTimer() and _stopTimer() private methods for this action to have an effect.

Technorati tags: , , ,
Filed under: , ,

Comments

# re: AJAX: How to control an <asp:Timer> on client-side

Monday, November 26, 2007 10:27 AM by Disturbed Buddha

Actually, the set_enabled() property (function) is directly linked with the starting and stopping of the timer.  If you look at the Timer.js file:

   set_enabled: function(value) {

       if (value !== this.get_enabled()) {

           this._enabled = value;

           this.raisePropertyChanged('enabled');

           if (!this.get_isUpdating()) {

               if (value) {

                   this._startTimer();

               }

               else {

                   this._stopTimer();

               }

           }

       }

   },

# re: AJAX: How to control an <asp:Timer> on client-side

Monday, December 01, 2008 10:12 PM by Andrew

I'm with the original poster... if I recieve a connection error in an asynchronous postback, and try to just set the enabled property to false in the ScriptManager's endRequest event;  it doesn't disable the timer... if I add the ._stopTimer() function call just after setting it to false, then it stops.

and yes I checked the values

get_enabled() == true

get_isUpdating() == false

So Disturbed, if the function is as you describe it above, then I don't know why it doesn't work and you have to stop the timer manually.... I just checked the script, and on my system it is nothing like what you described... the only other ways stop the timer by simply disabling it are to call the _update(enabled, interval) or dispose() methods... or somehow add the enabled and interval properties to the asynchronous request response... personally I think I will stick to the _StopTimer() function call.

Leave a Comment

(required) 
(required) 
(optional)
(required)