Home All Groups Group Topic Archive Search About

Several clocks on the same page

Author
15 Dec 2005 12:17 PM
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 ***

Author
15 Dec 2005 12:42 PM
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
Show quote
"Chris Leffer" <chr***@wank.com> wrote in message
news:%23dK$%23FXAGHA.2392@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 ***
Author
15 Dec 2005 12:58 PM
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 ***
Author
15 Dec 2005 1:03 PM
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

Show quote
"Chris Leffer" <chr***@wank.com> wrote in message
news:Olgu5cXAGHA.2156@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 ***
Author
15 Dec 2005 4:22 PM
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 ***
Author
15 Dec 2005 4:50 PM
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/


Show quote
"Chris Leffer" <chr***@wank.com> wrote in message
news:u5d$FPZAGHA.2356@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 ***
Author
15 Dec 2005 5:31 PM
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 ***

AddThis Social Bookmark Button