Several clocks on the same page

[Chris Leffer]

Hi.

My application fills a repeater with some data and at one column it
generates a clock for each row. This clock is based on a value that I
read from my database on each row like below:

Start Time
50:00 49:10
70:00 69:30

These clocks are countdown clocks and they are on readonly textboxes.
Today, I have a bunch of Javascript to do this. It works, but on each
page refresh I loop through the rows searching for the textboxes and
running a piece of code on the onblur event of these textboxes to start
the clocks. It causes a long scroll of the window.

Is there a better way to do it? I need to optimize this window but can't
think of a better way.

Regards,
Chris Leffer

*** Sent via Developersdex http://www.developersdex.com ***

[Karl Seguin]

I'll tell you how I'd do this. I'd add a dummy attribute to the textbox's
to differentiate them from other textboxes which might be on th page.

<asp:textbox id="x" runat="server" isCounter="true" />
I'd then cycle through all the textboxes

var textboxes = document.getElementsByTagName("INPUT")
for (var i = 0; i < textboxes.length; ++i)
{
var textbox = textbox[i];
if (textboxe.type == "TEXT" && textboxe.getAttribute("isCounter"))
{
//you now have a textbox who's counter needs to start
}
}

I'm not really sure how you start the counter, you didn't really say, I'd
assume it's a function that you pass the textbox reference to, something
like:

StartCountdown(textbox);

anyways, hoep this helped.....you shouldn't need to use onBlur and change
focus...that doesn't make sense to me.

Karl
--
MY ASP.Net tutorials
http://www.openmymind.net/
http://openmymind.net/redirector.aspx?documentId=51 - Learn about AJAX!

"Chris Leffer" <ch****@wank.com> wrote in message
news:%2******************@TK2MSFTNGP09.phx.gbl...

Hi.

My application fills a repeater with some data and at one column it
generates a clock for each row. This clock is based on a value that I
read from my database on each row like below:

Start Time
50:00 49:10
70:00 69:30

These clocks are countdown clocks and they are on readonly textboxes.
Today, I have a bunch of Javascript to do this. It works, but on each
page refresh I loop through the rows searching for the textboxes and
running a piece of code on the onblur event of these textboxes to start
the clocks. It causes a long scroll of the window.

Is there a better way to do it? I need to optimize this window but can't
think of a better way.

Regards,
Chris Leffer

*** Sent via Developersdex http://www.developersdex.com ***

[Chris Leffer]

Hi Karl.

Your solution is very similar to mine. I already use an attribute to
differentiate the clock textboxes from the others, and to start them, I
run a Javascript function on the page load that loops through the
textboxes setting the focus on them to raise their onblur event. Each
onblur event calls a function to start the clock.

My real problem is that setting the focus on each textbox makes the page
scroll. When the table has many rows the effect is really bad. I am
trying to find a way to start the clocks without have to put the focus
on the textbox. Maybe your suggesttion to use a function works for me.

Thanks for your reply.

Regards,
Chris Leffer
*** Sent via Developersdex http://www.developersdex.com ***

[Karl Seguin]

I don't understand why you need to give them focus

i realize it's to call the onblur, but that makes no sense. onBlur must
call a function right? and "this" gets passed into it?

(a) you might be able to do
textbox.blur();
without ever setting focus, just simulates the blur event

(b) not sure why you can't call the function blur() calls directly

if you have onBlur="startTimer(this);"

why not just do

startTimer(textbox);

Karl

--
MY ASP.Net tutorials
http://www.openmymind.net/
http://openmymind.net/redirector.aspx?documentId=51 - Learn about AJAX!

"Chris Leffer" <ch****@wank.com> wrote in message
news:Ol**************@TK2MSFTNGP11.phx.gbl...

Hi Karl.

Your solution is very similar to mine. I already use an attribute to
differentiate the clock textboxes from the others, and to start them, I
run a Javascript function on the page load that loops through the
textboxes setting the focus on them to raise their onblur event. Each
onblur event calls a function to start the clock.

My real problem is that setting the focus on each textbox makes the page
scroll. When the table has many rows the effect is really bad. I am
trying to find a way to start the clocks without have to put the focus
on the textbox. Maybe your suggesttion to use a function works for me.

Thanks for your reply.

Regards,
Chris Leffer
*** Sent via Developersdex http://www.developersdex.com ***

[Chris Leffer]

Hi Karl.

I agree with you but for something I could not discover, the code only
works if I set the focus on the textboxes.

See, I have this server code to generate the onblur for the textboxes:

Private Sub repVist_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.RepeaterItemEventArgs) Handles
repVist.ItemDataBound
Dim txtTime As TextBox
Dim objButton As Button

If e.Item.ItemType = ListItemType.Item OrElse _
e.Item.ItemType = ListItemType.AlternatingItem Then
Dim strRow As String = e.Item.ClientID & "_newrow"

txtTime = DirectCast(e.Item.FindControl("txtRowData"),
TextBox)
If Not txtTime Is Nothing Then
With txtRestante.Attributes
Dim intSla As Integer = CInt(.Item("sla"))
.Add("fTimer", "true")
.Add("onblur",
"setClock(document.Form1,this,this.value,this. id," & strRow & "," &
intSla.ToString & ");")

End With
End If

objButton = DirectCast(e.Item.FindControl("cmdCancel"),
Button)
If Not objButton Is Nothing Then
Dim id As String =
objButton.Attributes.Item("id").ToString
objButton.Attributes.Add("onclick",
"javascript:window.open('Justnew.aspx?id=" & id & "&mon=true','" &
id.Trim & "','width=500,height=350,status=yes'); return false;};")
End If

End If
End Sub

And I have that client code called on page load, to start the clocks:
function iniciaTimer()
{
var e = document.Form1.elements;
var n = e.length;
var i;

for(i=0;i<n;++i)
{
if (e[i].getAttribute('fTimer') != null)
{
e[i].focus();
//e[i].blur();
e[i].readOnly=true;
}
}
document.getElementById('cmdReturn').focus();
}

If I comment the line that set the focus and leave the line that
executes the blur() function, the code doesn't run.

Can you see something wrong here?

Thanks,
Chris Leffer

*** Sent via Developersdex http://www.developersdex.com ***

[Karl Seguin]

try e[i].onblur();

my initial point is that I still think you should simply be able to do:
if (e[i].getAttribute('fTimer') != null)
{
setClock(document.Form1,e[i],e[i].value,[i].id," & strRow & "," &
intSla.ToString & ");")
}

I realize the code isn't complete. Where are strRow and intSla coming from?
The simplest solution would be to add them as attributes to the textbox in
the ItemDataBound, and then you can do:
setClock(document.Form1,e[i],e[i].value,[i].id, e[i].getAttribute("Row"),
e[i].getAttribute("intSla"));
on a side node, if it were me, I'd simply do:

setClock(document.Form1, e[i]);

what's the point of passing a bunch of properties of e[i] if you are also
passing in e[i]? Let the setClock figure out what it needs from e[i]. This
makes your code easier to change and cleaner.

function setClock(form, textbox)
{
var value = textbox.value;
var id = textbox.id;
...
}
Karl

--
MY ASP.Net tutorials
http://www.openmymind.net/
"Chris Leffer" <ch****@wank.com> wrote in message
news:u5**************@tk2msftngp13.phx.gbl...

Hi Karl.

I agree with you but for something I could not discover, the code only
works if I set the focus on the textboxes.

See, I have this server code to generate the onblur for the textboxes:

Private Sub repVist_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.RepeaterItemEventArgs) Handles
repVist.ItemDataBound
Dim txtTime As TextBox
Dim objButton As Button

If e.Item.ItemType = ListItemType.Item OrElse _
e.Item.ItemType = ListItemType.AlternatingItem Then
Dim strRow As String = e.Item.ClientID & "_newrow"

txtTime = DirectCast(e.Item.FindControl("txtRowData"),
TextBox)
If Not txtTime Is Nothing Then
With txtRestante.Attributes
Dim intSla As Integer = CInt(.Item("sla"))
.Add("fTimer", "true")
.Add("onblur",
"setClock(document.Form1,this,this.value,this. id," & strRow & "," &
intSla.ToString & ");")

End With
End If

objButton = DirectCast(e.Item.FindControl("cmdCancel"),
Button)
If Not objButton Is Nothing Then
Dim id As String =
objButton.Attributes.Item("id").ToString
objButton.Attributes.Add("onclick",
"javascript:window.open('Justnew.aspx?id=" & id & "&mon=true','" &
id.Trim & "','width=500,height=350,status=yes'); return false;};")
End If

End If
End Sub

And I have that client code called on page load, to start the clocks:
function iniciaTimer()
{
var e = document.Form1.elements;
var n = e.length;
var i;

for(i=0;i<n;++i)
{
if (e[i].getAttribute('fTimer') != null)
{
e[i].focus();
//e[i].blur();
e[i].readOnly=true;
}
}
document.getElementById('cmdReturn').focus();
}

If I comment the line that set the focus and leave the line that
executes the blur() function, the code doesn't run.

Can you see something wrong here?

Thanks,
Chris Leffer

*** Sent via Developersdex http://www.developersdex.com ***

[Chris Leffer]

Hi Karl.

The e[i].onblur() did the trick, thank you.

But I will review my code in order to adapt your suggestions.

Regards,
Chris Leffer
*** Sent via Developersdex http://www.developersdex.com ***