RE: JavaScript Statement Question, resolved sort of

  • From: "Sina Bahram" <sbahram@xxxxxxxxx>
  • To: <programmingblind@xxxxxxxxxxxxx>
  • Date: Mon, 22 Oct 2007 11:07:17 -0400

Arrays are 0 based, so if you want to select the fifth element, the index
should be 4.

Take care,


From: programmingblind-bounce@xxxxxxxxxxxxx
[mailto:programmingblind-bounce@xxxxxxxxxxxxx] On Behalf Of Richard Thomas
Sent: Monday, October 22, 2007 11:02 AM
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: JavaScript Statement Question, resolved sort of


        Hi aAll:
        Well, never found out what the apparent index was for.
        However, I used the value picked from the hidden field and used it
to scroll to and set focus on the desired node in the tree view and it's
working.  Only thingy is the focus appears to be on the next node after the
node I set focus on.  Likely the focus is set at the end of the selected
node.  There may be a way to back it up to the beginning of the node but
that's a minor problem compared to manually scrolling through many nodes  on
every expand or collapse, Phew!  Done enough for now!
        So my first real JavaScript is working, yah!
        Rick Farmington Mich. USA
        ----- Original Message ----- 
        From: Richard Thomas <mailto:rthomas@xxxxxxxxxxx>  
        To: programmingblind@xxxxxxxxxxxxx 
        Sent: Sunday, October 21, 2007 12:25 PM
        Subject: Re: JavaScript Statement Question

        Hi Jim:
        Here is the actual article I'm evaluating.  I get everything except
that bloody {0}
        It's not very long  and you can just blast to where I labeled RtHere
if you want to see it used in context.
        Here is the original article:
         devised the followingsolution.
        First, the TreeView knows which node is selected because
         is a property of the TreeView control. This information has to be
stored somewhere,
        nd what is selected ultimately is rendered as HTML. If I know the ID
of the selected
        HTML control, then I should be able to scroll and focus it. Sure
enough, if you look
        at the source HTML of a page with a TreeView on it, you will find
the declaration
        of a hidden <INPUT> tag-think text box-whose ID is approximately
        RtHere, this is what the GetElementId will point to to get the
        <input type="hidden" name="TreeView1_SelectedNode"
        value="TreeView1t54" />
        With this knowledge, the idea is that a hidden input control is
basically a textbox
        and all you need to do is figure out what the contents are. A
TreeView is rendered
        as an HTML table-that's all ASP.NET controls are, little HTML code
        the value field is the client identifier of a table cell, a <TD> tag
        the node. So find the ID of the cell tag, scroll it into view, and
you are done.
        [Note to ASP.NET team: This should be a property of the TreeView.
Thank you.]
        To demonstrate, I wrote some code to generate a really full
TreeView. The
         event injects some JavaScript to find and focus the table cell (see
Listing 1) and
        the <body> tag's
        onload event calls this injected function.
        Listing 1: The Code Behind That Fills a Treeview and Injects the
        Imports System.Collections.Generic
        Partial Class _Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
        If (IsPostBack) Then Return
        Dim chicken As New TreeNode("Chicken")
        Dim beef As New TreeNode("Beef")
        RtHere, I removed the rest of the demo nodes.
        End Sub
        Public Sub InjectLoadEvent()
        Dim script As String = _
        "function LoadEvent()" + _
        {" + _
        " try" + _
        " {{" + _
        RtHere: here is the actual statement.
        The rendered Html is below.
        "   var elem = document.getElementById('{0}_SelectedNode');" + _"
if(elem != null )" + _
        "   {{" + _
        "     var node = document.getElementById(elem.value);" + _
        "     if(node != null)" + _
        "     {{" + _
        "       node.scrollIntoView(true);" + _
        "       {1}.scrollLeft = 0;" + _
        "     }}" + _
        "   }}" + _
        " }}" + _
        " catch(oException)" + _
        " {{}}" + _
"LoadEvent", _
        String.Format(script, TreeView1.ClientID, Panel1.ClientID), True)
        End Sub
        End Class
        Listing 2 shows the complete page.
        Listing 2: The ASP Code That Defines the Appearance of this
Relatively Simple Page
        <%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default"
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        <html xmlns=""; >
        <head runat="server">
        <title>Focus Tree Node on Postback</title>
        <body onload="LoadEvent()">
        <form id="form1" runat="server">
        <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px"
        <asp:TreeView ID="TreeView1" runat="server">
        <SelectedNodeStyle BackColor="#8080FF" />
        Figure 1 presents an example of what the simple page looks like.
        Click here for a larger image.
        Figure 1: A TreeView Nested in a Scrollable Panel Control (in IE7)
        Finally, Listing 3 shows the resultant JavaScript, which is the
interesting part.
        RtHere:, the rendered version.
        Listing 3: The Injected JavaScript
        function LoadEvent()
        var elem = document.getElementById('TreeView1_SelectedNode');
        if(elem != null )
        var node = document.getElementById(elem.value);
        if(node != null)
        Panel1.scrollLeft = 0;
        }// -->
        The JavaScript function
         finds the hidden input field. I injected all of the code expect the
         of the TreeView, which in this case is TreeView1 but in deeply
nested pages can
        have an ungodly long name. When I get that control, I use its value
property to find
        the table cell, and with that control I invoke
        scrollIntoView. The scrollLeft
        f property keeps the Panel scrolled to the left. And it works!
                ----- Original Message ----- 
                From: Jim <mailto:jhomme1028@xxxxxxxxx>  
                To: programmingblind@xxxxxxxxxxxxx 
                Sent: Sunday, October 21, 2007 10:40 AM
                Subject: Re: JavaScript Statement Question

                Hi Richard,
                I think it should be brackets rather than braces. Brackets
contain indexes to array items.
                Take back your shopping life at

                        ----- Original Message ----- 
                        From: Richard Thomas <mailto:rthomas@xxxxxxxxxxx>  
                        To: programmingblind@xxxxxxxxxxxxx 
                        Sent: Sunday, October 21, 2007 7:55 AM
                        Subject: JavaScript Statement Question

                        In this statement what is the '{0}'?
                        "   var elem =
document.getElementById('{0}_SelectedNode');" I know the single parameter
inside the GetElementById is the Id Tagg value of the control to look up but
the tag he looks up has an id of something like Panel1_SelectedNode that it
looks like he may be replacing with the {0} in the GetElementById Statement.
                        haven't found anything, actually too much, on the
statement but nothing using '{0}'.
                        What is it called, index or something and what does
it mean?  I'll dig around more if I can find something to google on that
points to this particular syntax.
                        My guess is it has to do with a Document Control
relative Reference or something but I just can't find anything like it
googling so far.
                        Thanks:Rick Farmington Mich. USA

View the list's information and change your settings at 

Other related posts: