GetElementByID Question

Last post 06-07-2007 2:35 PM by JoshStodola. 13 replies.

Sort Posts:

  • GetElementByID Question

    06-03-2007, 5:10 AM

    Hello,

    I have a question concerning getelementbyid().  I have some javascript (written by someone else) for a feature that was working before I switched from the Ajax.net toolkit tab panel to the multiview control.  The old line of code is:

    var txt=document.getElementById('Tabs_VisualSearchTabPanel_SearchTextBox');

    In the original design the tab panel was called "Tabs" and within this was a tab panel called "VisualSearchTabPanel", then within this panel was contained a control called "SearchTextBox".  But this whole string with the underscores is nowhere else in the site.  Is this some way of identifying an element that I have not seen before?  I am a newbie at javascript so this is possible.  Can someone explain how this is working and how I would find the correct string for my new design?  If anyone needs to see the code to my page to determine this it is www.visual-search.net.  Thanks in advance.

                                                                                                                         Robert
     

  • Re: GetElementByID Question

    06-03-2007, 11:39 AM
    • Loading...
    • mosessaur
    • Joined on 07-11-2002, 6:40 PM
    • Cairo
    • Posts 353

    I suggestion to use this way:

    var txt=document.getElementById("<%=SearchTextBox.ClientID%>");

    Where SearchTextBox is a text box in your page.

    Muhammad M. Mosa Soliman
    Software Engineer
    Moses' Blog
  • Re: GetElementByID Question

    06-03-2007, 10:26 PM

    I have already tried using the method you describe. It does not seem to solve my problem.

  • Re: GetElementByID Question

    06-04-2007, 1:07 AM
    • Loading...
    • Nitinkcv
    • Joined on 03-13-2007, 11:07 AM
    • Posts 264

    Hi,

    Hi could u please post a part of ur code please.

    like If ur textbox is inside a repeater the using the client id wont work

     

    Thanks
  • Re: GetElementByID Question

    06-05-2007, 3:10 AM

     <asp:MultiView ID="MultiView1" runat="server">
                    <asp:View ID="View1" runat="server">
                        <asp:Panel ID="VisualSearchPanel" runat="server" Height="600px">
                          
                            <div id="Categories" style="width: 258px; left: 516px; top: 229px; font-size: larger;
                                height: 267px;">
                                <asp:UpdatePanel ID="MediaTypesUpdatePanel" runat="server">
                                    <ContentTemplate>
                                      
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </div>
                            <div id="content" style="left: 0px; top: 142px; z-index: 100;">
                                <div id="contactinfo" style="left: 516px; z-index: 100; top: 392px; width: 259px;
                                    height: 148px;">
                                    <div id="tellafriend">
                                      
                                      
                                    </div>
                                </div>
                            </div>
                            <div id="RSSFeed" style="left: 4px; width: 469px; position: absolute; top: 229px;
                                height: 268px;">
                                <div style="text-align: left">
                                  
                                </div>
                            </div>
                            <div id="search" style="left: 4px; width: 771px; top: 148px; z-index: 102; height: 48px;">
                                <asp:TextBox ID="SearchTextBox" runat="server" Width="444px"></asp:TextBox>&nbsp;
                               
                                <asp:Button ID="SearchButton" runat="server" Text="Search" OnClick="SearchButtonClick"
                                    meta:resourceKey="SearchButton" />
                            </div>
                            <div id="SpecificSearch" style="left: 380px; z-index: 106; position: absolute; top: 137px;
                                height: 15px">
                              
                            </div>
                        </asp:Panel>
                        <div id="VisualSearchNews" style="left: 4px; z-index: 100; top: 534px; width: 470px;
                            height: 148px;">
                          
                        </div>
                    </asp:View>
                  

  • Re: GetElementByID Question

    06-05-2007, 3:33 AM
    Answer

    Hi Robert,

    When we move a control (for example a TextBox) into the MultiView control, there will not be a prefix to the TextBox’s client ID. Hence, we can simply use document.getElementById('SearchTextBox').

    What we should notice is that if a View is unActive, the controls in the View will not render to the client so that they do not exist on the client side.

    The following code is for your reference. If you change the ActiveViewIndex property to -1, you can find SearchTextBox doesn’t exist in html.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Test  height</title>
        <script type="text/javascript">
    function setValue()
    {
        var tb = document.getElementById(' SearchTextBox');
        tb.value = 'hello';
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="View1" runat="server">
                    <asp:TextBox ID=" SearchTextBox" runat="server" Style="position: static"></asp:TextBox></asp:View>
            </asp:MultiView>
            <input id="Button2" style="position: static" type="button" value="button" onclick="setValue()" /></div>
        </form>
    </body>
    </html>

     

    Sincerely,
    Benson Yu
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help. This can be beneficial to other community members reading the thread.
  • Re: GetElementByID Question

    06-05-2007, 3:47 AM

    Hi Robert,

    You have posted your code. I should refresh my browser before replying. According to the code you posted, I find two issues:

     1. Not assign a value for ActiveViewIndex propery, so the value is -1 by default, and then no View will render to the client.
     2. The SearchButton only has a server side event handler. Where is the client script code?

     

    Sincerely,
    Benson Yu
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help. This can be beneficial to other community members reading the thread.
  • Re: GetElementByID Question

    06-05-2007, 10:02 AM
    • Loading...
    • JoshStodola
    • Joined on 01-16-2007, 2:17 PM
    • Heartland of America
    • Posts 3,156

    Hi Robert,

    I wish I could fix this but you know why I cant.  This is my suggestion, there is a good chance you can fix this yourself.  Run the visual search page and view the page source.  Look for the search textbox.  Get it's ID an change the getElementById() call to reflect the correct ID.  As Benson pointed out, it should just be 'SearchTextBox'.  Search through my javascript and replace that ID wherever you see it.

    This got screwed up when you converted from TabPanel to MultiView.

    Hope this helps you move on!

    Josh Stodola ← Come check out my blog!
  • Re: GetElementByID Question

    06-05-2007, 3:35 PM
    • Loading...
    • rbunn83815
    • Joined on 02-02-2007, 8:38 AM
    • Posts 87

    Actually I already tried that, but if I am understanding the issue with the multiview the text box doesn't exist except when it is set to 0.  Since I need to get the element in other views then should I just move the text box and search button outside the multiview altogether and make it invisible in other views?  Also, he mentioned the input line, but I don't remember seeing any line of code like that when it was working correctly.  Thanks in advance.

                                                                                                        Robert

    On the border of insanity and reason lies the realm of genius.
  • Re: GetElementByID Question

    06-05-2007, 3:52 PM
    • Loading...
    • JoshStodola
    • Joined on 01-16-2007, 2:17 PM
    • Heartland of America
    • Posts 3,156

    After looking at the page, you do only have the textbox on the first view.  The textbox on all subsequent pages is that of the screen scrape, so you will not be able to modify it.  I'm not sure what to tell you now...

    Josh Stodola ← Come check out my blog!
  • Re: GetElementByID Question

    06-05-2007, 5:19 PM
    • Loading...
    • donkeyhotee
    • Joined on 04-02-2007, 7:00 PM
    • Atlanta, GA
    • Posts 18

    Tried using SearchTextBox.ClientID?  This should get you the correct 'embedded' control ID.

    var txt=document.getElementByID('<%=SearchTextBox.ClientID %>');

    CIVIL WAR:
    I'm with the Core Numerical Values
    4 8 15 16 23 42
  • Re: GetElementByID Question

    06-05-2007, 8:21 PM
    • Loading...
    • rbunn83815
    • Joined on 02-02-2007, 8:38 AM
    • Posts 87

    It turns out Benson had the right idea here.  When I removed the SearchButton and SearchTextBox from the multiview control everything started working great again.  Thanks Benson for pointing me in the right direction, this was starting to drive me nuts.  Now I need to start working with the API to get cleaner results.  Thanks everyone who offered their suggestions.  Below is what worked in the code: 

    document.getElementById('SearchButton')

                                                                                                     Robert

    On the border of insanity and reason lies the realm of genius.
  • Re: GetElementByID Question

    06-07-2007, 1:33 PM
    • Loading...
    • rsassine
    • Joined on 04-10-2007, 10:48 PM
    • Posts 21

    I was looking for this syntax for a long time.

    Thanks.

    PS -  ASP.NET does NOT leave in a world by itself.  Is there a good book/IP address where I can find interaction between Javascript and ASP.NET?

  • Re: GetElementByID Question

    06-07-2007, 2:35 PM
    • Loading...
    • JoshStodola
    • Joined on 01-16-2007, 2:17 PM
    • Heartland of America
    • Posts 3,156

    Im actually writing a blog right now (almost done) that I intend to write several posts with relation to the interaction of Javascript and ASP.NET

    Josh Stodola ← Come check out my blog!
Page 1 of 1 (14 items)