Wednesday, March 28, 2012

System.Web.UI.Timer interval in client side code

Has anyone successfully set the Interval property in a System.Web.UI.Timer control using client side scripting of any language?

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

FYI, some other methods are:

timer.get_interval();
timer._startTimer();
timer._stopTimer();
timer.set_enabled(true/false);


If this works I owe you a pretend steak dinner. Spent all day yesterday trying to track this down.


Big Smile Let me know if it does. I like my pretend steaks done pretend medium.


Okay so at first it didn't work. So I started experimenting.

It works when there's no master page, and just one single page, and the script is inside the page, call this TestSingle.aspx.

So I moved it to the child page, the timer resides on the child page, and put the script inside the child page and it works, call this Child.aspx.

So then I moved the script to the outside file that is loaded by the master page into every page and the function fails to find Timer1.

So then I used TestSingle.aspx again, and this time loaded the function from an outside .js file, and it failed to find Timer1.

Long story short, it works, but if it's trying to access Timer1 via script in an outside file, it fails to find Timer1. Is there some qualifier I need now?


Can you post the contents of your .js file as well as the source code where you reference it in the master page?


The only thing I put in the .js file was:

function StopTimer()
{
alert(1);
var timer = $find('<%= Timer1.ClientID %>');
alert(timer);
//timer.set_interval(5000);
alert(timer.get_interval());
//timer._stopTimer();

}

<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="TestSingle.aspx.cs" Inherits="Website.TestSingle" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title><script src="./script/Test.js" type="text/javascript"></script> </head><body> <form id="form1" runat="server"> <div>   <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Timer ID="Timer1" runat="server"> </asp:Timer> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="StopTimer()" /> </form></body></html>

That setup fails to find Timer1, not even using a master child setup.


Take out the <script src="./script/Test.js" type="text/javascript"></script> and reference it via your script manager control.

<asp:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<asp:ScriptReferencePath="./script/Test.js"/>
</Scripts>
</asp:ScriptManager>


Nope didnt work.


Sorry I didn't catch it the first time around...

In the .js file you can't use the <%= %> notation. That is strictly an ASP.NET thing. The only thing that can be in the .js file is pure javascript. So you want it to look like:

var timer = $find('Timer1');

$find() does take a second, optional parameter that allows you to specify the parent of the component you're looking for. That basically serves the same purpose as requiring it to use the ClientID of the control. You can read more about that here: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys/ApplicationClass/SysApplicationFindComponentMethod.aspx


You can't use inline server script in your JavaScript include files. So, $find('<%= Timer1.ClientID %>') is literally looking for a control with the client ID of<%= Timer1.ClientID %>.

I'd set a JavaScript variable in pageLoad() with the Timer's ClientID and then reference that in the included script.


So how does one access the Client ID from javascript? <% ClientID %> ?


OnClientClick="StopTimer(<%= Timer1.ClientID %>)"

function StopTimer(args) {
var timer = $find(args);
timer.set_interval(5000);
}


Well yeah that achieves stopping it with a button. But in actuality what I'm going to do is "onfocus" on a TextBox/ComboBox/Etc. call StopTimer, and on a onblur turn it back on. This naturally has to happen within a millisecond, and be extremely easy to code into the project. ie StopTimer and StartTimer exists in a separate file and I just past "onfocus=StopTimer() onblue=StartTimer()" into the <input>'s, or in the pageload set attributes for windows controls.

So yeah, I could put that function you wrote in the outside .js file and just have the function take a parameter. But that's gonna make the HTML even bigger then it is already, although that should work.

And every child has TimerTicker added to it programmatically from the inherited root class every child page inherited. That way I dont have to manually add it to every child page someone makes, this solution is already at 30 child pages based off same master.


Yeah it's not finding hte control even with the args method you posted. It's acutally erroring out and giving syntax error. Adding ' ' to either side on StopTimer('<%= Timer1.ClientID %>') just sends the string to the method.

1 comment:

ADmin said...

yet remember to alter and buy essays online edit your work thoroughly to guarantee there are no spelling, syntactic or punctuation failures.

Post a Comment