Javascript code to recursively search for a element given the element's Id

Discussion in 'ASP .Net' started by Cal Who, May 22, 2010.

  1. Cal Who

    Cal Who Guest

    I need Javascript code to recursively search for a element given the
    element's Id so that I can modify a elements attributes.

    I do not use JQuery but I believe that once when I was searching the
    Internet for something else I saw that JQuery has a function called $ that
    did just that. And the author showed the Javascript code from that library.
    I'm not sure if that is what I need but now that I want it I can't find it.

    Bottom line: Can you point to (or supply) Javascript code to recursively
    search for a element given it's Id?



    Thanks in advance
     
    Cal Who, May 22, 2010
    #1
    1. Advertising

  2. On Sat, 22 May 2010 14:38:38 -0400, " Cal Who"
    <> wrote:

    >I need Javascript code to recursively search for a element given the
    >element's Id so that I can modify a elements attributes.
    >
    >I do not use JQuery but I believe that once when I was searching the
    >Internet for something else I saw that JQuery has a function called $ that
    >did just that. And the author showed the Javascript code from that library.
    >I'm not sure if that is what I need but now that I want it I can't find it.
    >
    >Bottom line: Can you point to (or supply) Javascript code to recursively
    >search for a element given it's Id?
    >

    Perhaps you mean something like

    var element = document.getElementById('someID');

    regards
    A.G.
     
    Registered User, May 22, 2010
    #2
    1. Advertising

  3. recursively search for element

    You do not need a recursive function to find an element in a document by its id.

    Just use

    var element = document.getElementById('someID');




    Cal Who wrote:

    Javascript code to recursively search for a element given the element's Id
    22-May-10

    I need Javascript code to recursively search for a element given th
    element's Id so that I can modify a elements attributes

    I do not use JQuery but I believe that once when I was searching th
    Internet for something else I saw that JQuery has a function called $ tha
    did just that. And the author showed the Javascript code from that library
    I am not sure if that is what I need but now that I want it I cannot find it

    Bottom line: Can you point to (or supply) Javascript code to recursivel
    search for a element given it is Id


    Thanks in advance

    Previous Posts In This Thread:


    Submitted via EggHeadCafe - Software Developer Portal of Choice
    Free Online Courses Available for Eggheadcafe.com Users
    http://www.eggheadcafe.com/tutorial...8-fc3cf6855293/free-online-courses-avail.aspx
     
    Peter Bromberg, May 22, 2010
    #3
  4. Cal Who

    Cal Who Guest

    That's what I thought but lost confidence when it returned null in the
    following:

    <script type="text/javascript">

    function SetMargins(id) {

    var element = document.getElementById(id);

    ....

    Which is in the .master and the id looks like I'd expect:

    id = "ctl00_BottomImageCPH_QQQ"



    I called it from and aspx.vb file

    <asp:Content ID="Content8" runat="server"
    ContentPlaceHolderID="BottomImageCPH">

    <script type="text/javascript">

    SetMargins('<%=QQQ.ClientID%>');

    </script>


    <div runat="server" id="QQQ" style="margin-left: 10%; margin-right: 10%;" >

    ....


    Why the null??


    Thanks
     
    Cal Who, May 22, 2010
    #4
  5. " Cal Who" <> wrote in message
    news:ht9l9g$dti$-september.org...

    > Why the null??


    Because of ASP.NET's control ID munging.

    var control = document getElementById('<%=MyControl.ClientID%>');


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net
     
    Mark Rae [MVP], May 23, 2010
    #5
  6. On Sat, 22 May 2010 18:19:25 -0400, " Cal Who"
    <> wrote:

    >That's what I thought but lost confidence when it returned null in the
    >following:
    >
    ><script type="text/javascript">
    >
    >function SetMargins(id) {
    >
    >var element = document.getElementById(id);
    >
    >...
    >
    >Which is in the .master and the id looks like I'd expect:
    >
    >id = "ctl00_BottomImageCPH_QQQ"
    >
    >
    >
    >I called it from and aspx.vb file
    >
    ><asp:Content ID="Content8" runat="server"
    >ContentPlaceHolderID="BottomImageCPH">
    >
    ><script type="text/javascript">
    >
    >SetMargins('<%=QQQ.ClientID%>');
    >
    ></script>
    >
    >
    ><div runat="server" id="QQQ" style="margin-left: 10%; margin-right: 10%;" >
    >
    >...
    >
    >
    >Why the null??
    >

    From the second snippet it appears the SetMargins method is being
    called as the document is rendered. The document is rendered from top
    to bottom. If SetMargins is called before control QQQ is rendered to
    the document, the document won't find the control, and
    document.getElementById will return null.

    You may have to read that last sentence a couple of times ;)

    I would suggest attaching a javascript method to the page body's
    onload event. That method will be called after the page has been
    rendered. From within that method make the call to SetMargins.

    regards
    A.G.
     
    Registered User, May 23, 2010
    #6
  7. Cal Who

    Cal Who Guest

    "Mark Rae [MVP]" <> wrote in message
    news:D...
    >" Cal Who" <> wrote in message
    >news:ht9l9g$dti$-september.org...
    >
    >> Why the null??

    >
    > Because of ASP.NET's control ID munging.
    >
    > var control = document getElementById('<%=MyControl.ClientID%>');
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net

    Help me out here. It seems to me that
    calling it from the .vb file using the clientId
    is effectively the same.
    And the munged string gets passed.

    No?

    As ways, Thanks
     
    Cal Who, May 23, 2010
    #7
  8. Cal Who

    Cal Who Guest

    "Registered User" <> wrote in message
    news:...
    > On Sat, 22 May 2010 18:19:25 -0400, " Cal Who"
    > <> wrote:
    >
    >>That's what I thought but lost confidence when it returned null in the
    >>following:
    >>
    >><script type="text/javascript">
    >>
    >>function SetMargins(id) {
    >>
    >>var element = document.getElementById(id);
    >>
    >>...
    >>
    >>Which is in the .master and the id looks like I'd expect:
    >>
    >>id = "ctl00_BottomImageCPH_QQQ"
    >>
    >>
    >>
    >>I called it from and aspx.vb file
    >>
    >><asp:Content ID="Content8" runat="server"
    >>ContentPlaceHolderID="BottomImageCPH">
    >>
    >><script type="text/javascript">
    >>
    >>SetMargins('<%=QQQ.ClientID%>');
    >>
    >></script>
    >>
    >>
    >><div runat="server" id="QQQ" style="margin-left: 10%; margin-right: 10%;"
    >> >

    >>
    >>...
    >>
    >>
    >>Why the null??
    >>

    > From the second snippet it appears the SetMargins method is being
    > called as the document is rendered. The document is rendered from top
    > to bottom. If SetMargins is called before control QQQ is rendered to
    > the document, the document won't find the control, and
    > document.getElementById will return null.

    I bet that is why IE8 developer tool only shows the HTML to just befor QQQ.
    That's as much as was rendered.


    >
    > You may have to read that last sentence a couple of times ;)
    >
    > I would suggest attaching a javascript method to the page body's
    > onload event. That method will be called after the page has been
    > rendered. From within that method make the call to SetMargins.


    But there are no events in a content page, is there?

    >
    > regards
    > A.G.



    Thanks
     
    Cal Who, May 23, 2010
    #8
  9. Re: Javascript code to recursively search for a element given theelement's Id

    Mark Rae [MVP] wrote:
    > " Cal Who" <> wrote in message
    > news:ht9l9g$dti$-september.org...
    >
    >> Why the null??

    >
    > Because of ASP.NET's control ID munging.
    >
    > var control = document getElementById('<%=MyControl.ClientID%>');
    >
    >

    He did that, but at the point where his SetMargins function was called.
     
    Harlan Messinger, May 23, 2010
    #9
  10. " Cal Who" <> wrote in message
    news:ht9sv9$cdh$-september.org...

    > No?


    Yes, but it seems from other replies that you're trying to call the
    SetMargins function before the page is completely rendered, which is why
    it's not finding the control...


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net
     
    Mark Rae [MVP], May 23, 2010
    #10
  11. On Sat, 22 May 2010 20:34:51 -0400, " Cal Who"
    <> wrote:

    >
    >"Registered User" <> wrote in message
    >news:...
    >> On Sat, 22 May 2010 18:19:25 -0400, " Cal Who"
    >> <> wrote:
    >>
    >>>That's what I thought but lost confidence when it returned null in the
    >>>following:
    >>>
    >>><script type="text/javascript">
    >>>
    >>>function SetMargins(id) {
    >>>
    >>>var element = document.getElementById(id);
    >>>
    >>>...
    >>>
    >>>Which is in the .master and the id looks like I'd expect:
    >>>
    >>>id = "ctl00_BottomImageCPH_QQQ"
    >>>
    >>>
    >>>
    >>>I called it from and aspx.vb file
    >>>
    >>><asp:Content ID="Content8" runat="server"
    >>>ContentPlaceHolderID="BottomImageCPH">
    >>>
    >>><script type="text/javascript">
    >>>
    >>>SetMargins('<%=QQQ.ClientID%>');
    >>>
    >>></script>
    >>>
    >>>
    >>><div runat="server" id="QQQ" style="margin-left: 10%; margin-right: 10%;"
    >>> >
    >>>
    >>>...
    >>>
    >>>
    >>>Why the null??
    >>>

    >> From the second snippet it appears the SetMargins method is being
    >> called as the document is rendered. The document is rendered from top
    >> to bottom. If SetMargins is called before control QQQ is rendered to
    >> the document, the document won't find the control, and
    >> document.getElementById will return null.

    >I bet that is why IE8 developer tool only shows the HTML to just befor QQQ.
    >That's as much as was rendered.
    >
    >
    >>
    >> You may have to read that last sentence a couple of times ;)
    >>
    >> I would suggest attaching a javascript method to the page body's
    >> onload event. That method will be called after the page has been
    >> rendered. From within that method make the call to SetMargins.

    >
    >But there are no events in a content page, is there?
    >

    This is true but a solution can be found at
    http://www.webreference.com/programming/javascript/onloads/

    regards
    A.G.
     
    Registered User, May 23, 2010
    #11
  12. Cal Who

    Cal Who Guest

    "Mark Rae [MVP]" <> wrote in message
    news:...
    >" Cal Who" <> wrote in message
    >news:ht9sv9$cdh$-september.org...
    >
    >> No?

    >
    > Yes, but it seems from other replies that you're trying to call the
    > SetMargins function before the page is completely rendered, which is why
    > it's not finding the control...
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net

    True, I just move the call to after the </div> and that seems to have fixed
    it. I'm not sure if that is a reliable way.

    Thanks
     
    Cal Who, May 23, 2010
    #12
  13. Cal Who

    Cal Who Guest

    "Registered User" <> wrote in message
    news:...
    > On Sat, 22 May 2010 20:34:51 -0400, " Cal Who"
    > <> wrote:
    >
    >>
    >>"Registered User" <> wrote in message
    >>news:...
    >>> On Sat, 22 May 2010 18:19:25 -0400, " Cal Who"
    >>> <> wrote:
    >>>
    >>>>That's what I thought but lost confidence when it returned null in the
    >>>>following:
    >>>>
    >>>><script type="text/javascript">
    >>>>
    >>>>function SetMargins(id) {
    >>>>
    >>>>var element = document.getElementById(id);
    >>>>
    >>>>...
    >>>>
    >>>>Which is in the .master and the id looks like I'd expect:
    >>>>
    >>>>id = "ctl00_BottomImageCPH_QQQ"
    >>>>
    >>>>
    >>>>
    >>>>I called it from and aspx.vb file
    >>>>
    >>>><asp:Content ID="Content8" runat="server"
    >>>>ContentPlaceHolderID="BottomImageCPH">
    >>>>
    >>>><script type="text/javascript">
    >>>>
    >>>>SetMargins('<%=QQQ.ClientID%>');
    >>>>
    >>>></script>
    >>>>
    >>>>
    >>>><div runat="server" id="QQQ" style="margin-left: 10%; margin-right:
    >>>>10%;"
    >>>> >
    >>>>
    >>>>...
    >>>>
    >>>>
    >>>>Why the null??
    >>>>
    >>> From the second snippet it appears the SetMargins method is being
    >>> called as the document is rendered. The document is rendered from top
    >>> to bottom. If SetMargins is called before control QQQ is rendered to
    >>> the document, the document won't find the control, and
    >>> document.getElementById will return null.

    >>I bet that is why IE8 developer tool only shows the HTML to just befor
    >>QQQ.
    >>That's as much as was rendered.
    >>
    >>
    >>>
    >>> You may have to read that last sentence a couple of times ;)
    >>>
    >>> I would suggest attaching a javascript method to the page body's
    >>> onload event. That method will be called after the page has been
    >>> rendered. From within that method make the call to SetMargins.

    >>
    >>But there are no events in a content page, is there?
    >>

    > This is true but a solution can be found at
    > http://www.webreference.com/programming/javascript/onloads/
    >
    > regards
    > A.G.


    I moved the call to right after the </div> and that seems to have fixed it.
    I'm not sure if that is a reliable way.

    Do you think adding an event would be more reliable (say over different
    browser types)

    In this situation I don't see the "magically change" he referred to
    probably because the rendering and change is so close.

    In any event I'm saving that link for possible later need- good stuff.

    Thanks
     
    Cal Who, May 23, 2010
    #13
  14. On Sun, 23 May 2010 08:35:45 -0400, " Cal Who"
    <> wrote:

    >
    >"Registered User" <> wrote in message
    >news:...
    >> On Sat, 22 May 2010 20:34:51 -0400, " Cal Who"
    >> <> wrote:
    >>
    >>>
    >>>"Registered User" <> wrote in message
    >>>news:...
    >>>> On Sat, 22 May 2010 18:19:25 -0400, " Cal Who"
    >>>> <> wrote:
    >>>>
    >>>>>That's what I thought but lost confidence when it returned null in the
    >>>>>following:
    >>>>>
    >>>>><script type="text/javascript">
    >>>>>
    >>>>>function SetMargins(id) {
    >>>>>
    >>>>>var element = document.getElementById(id);
    >>>>>
    >>>>>...
    >>>>>
    >>>>>Which is in the .master and the id looks like I'd expect:
    >>>>>
    >>>>>id = "ctl00_BottomImageCPH_QQQ"
    >>>>>
    >>>>>
    >>>>>
    >>>>>I called it from and aspx.vb file
    >>>>>
    >>>>><asp:Content ID="Content8" runat="server"
    >>>>>ContentPlaceHolderID="BottomImageCPH">
    >>>>>
    >>>>><script type="text/javascript">
    >>>>>
    >>>>>SetMargins('<%=QQQ.ClientID%>');
    >>>>>
    >>>>></script>
    >>>>>
    >>>>>
    >>>>><div runat="server" id="QQQ" style="margin-left: 10%; margin-right:
    >>>>>10%;"
    >>>>> >
    >>>>>
    >>>>>...
    >>>>>
    >>>>>
    >>>>>Why the null??
    >>>>>
    >>>> From the second snippet it appears the SetMargins method is being
    >>>> called as the document is rendered. The document is rendered from top
    >>>> to bottom. If SetMargins is called before control QQQ is rendered to
    >>>> the document, the document won't find the control, and
    >>>> document.getElementById will return null.
    >>>I bet that is why IE8 developer tool only shows the HTML to just befor
    >>>QQQ.
    >>>That's as much as was rendered.
    >>>
    >>>
    >>>>
    >>>> You may have to read that last sentence a couple of times ;)
    >>>>
    >>>> I would suggest attaching a javascript method to the page body's
    >>>> onload event. That method will be called after the page has been
    >>>> rendered. From within that method make the call to SetMargins.
    >>>
    >>>But there are no events in a content page, is there?
    >>>

    >> This is true but a solution can be found at
    >> http://www.webreference.com/programming/javascript/onloads/
    >>
    >> regards
    >> A.G.

    >
    >I moved the call to right after the </div> and that seems to have fixed it.
    >I'm not sure if that is a reliable way.
    >
    >Do you think adding an event would be more reliable (say over different
    >browser types)
    >

    I would use the onload event because the page has been loaded. Leaving
    the call in-line with the rendering works but is subject to error if
    the mark-up gets re-arranged by someone else. AFAIK all browsers
    support the onload event so that should not be an issue.

    >In this situation I don't see the "magically change" he referred to
    >probably because the rendering and change is so close.
    >

    If the user could see the change there wouldn't be any magic ;)

    >In any event I'm saving that link for possible later need- good stuff.
    >


    regards
    A.G.
     
    Registered User, May 23, 2010
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lord0
    Replies:
    1
    Views:
    586
    Thomas Weidenfeller
    Apr 19, 2006
  2. chiara
    Replies:
    6
    Views:
    494
    Barry Schwarz
    Oct 6, 2005
  3. 2Barter.net
    Replies:
    0
    Views:
    386
    2Barter.net
    Dec 13, 2006
  4. Casey Hawthorne
    Replies:
    385
    Views:
    5,945
    ng2010
    Apr 4, 2010
  5. David Combs
    Replies:
    7
    Views:
    129
    Theo van den Heuvel
    May 12, 2005
Loading...

Share This Page