.net user controls and Div modification

[bouwob]

I am using an asp.net user control. The control contains 2 divs that need to be shown/hidden. I cannot use getElementbyID since the dive name is auto generated for each control.

This is the HTML in the user control

    <a href="#" onclick="hideFilter(this);return false;" class="Filter">Filter</a>&nbsp;
    <div [B]id="FilterDiv"[/B] title="FilterDiv" runat="server" class="ControlDivs" style="DISPLAY:none;width:360px">
        <hr class="hrHides" />
        <asp:Label ID="lblCriteria" runat="server" Text="Criteria"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="btnFilter" runat="server" Text="Filter" OnClick="btnFilter_Click" />
        <asp:Button ID="btnClear" runat="server" Text="Clear/Reset" OnClick="btnClear_Click" /><br />
        <hr class="hrHides" />
    </div>
    <asp:panel id="pnlAdd" runat="server" visible="false">
    <a href="#" onclick="hideFilter(this);return false;" class="Filter">Add</a>&nbsp;
    <div [B]id="AddDiv"[/B] title="AddDiv" runat="server" class="ControlDivs" style="DISPLAY:none;width:360px">
        <hr class="hrHides" />
        Please enter the value you would like to add<br />        
        <asp:TextBox ID="txtAddition" runat="server"></asp:TextBox>
        <asp:Button ID="btnAdd" runat="server" Text="Add" onclick="btnAdd_Click" />
        <hr class="hrHides" />
    </div>

The 2 pieces bolded above when generated look like this ctl00_cphMain_wizRegisterNew_fltrPlatform_FilterDiv and ctl00_cphMain_wizRegisterNew_fltrCategory_pnlAdd

since user controls can be used more than once on a page the names are autogenerated. Unfortunatly I have no way of getting the autogenerated name in time to set the html correctly.

So I guess what I really need is how do I access the next element (the div) after the one calling it.

I have been looking at the DOM tree but have been unsuccesful so far on makeing it work.

Here is the not working javascipt that I am currently sitting on.

        function hideFilter(me)
        {
		    var e = me.nextSibling;
		    if(e.style.display == 'none')
		    e.style.display = 'block';
		    else
		    e.style.display = 'none';
        }

I have unsuccessfully attempted chilnode, parentnode, previoussibling, nextsibling, and a bunch of combinations of all of the above.

Can someone point me to how this can be acchived????

 

[j4606]

What if you drop in a div inside that div and give that an id?
Example would be

<div id="OrderSummaryDiv" runat="server" Visible="false">
    <div id="clientsidediv">
         somestuff
    </div>
</div>

Or maybe you can just give that div a class and get the element by class name?
script code

divs = documnet.getElementsByTagName("div");
for(var 1 = 0, i<divs.length,i++){
   if(div[i].className = "uniqueDivId"){
     alert("i finds it!");
   }
}

html

<div id="retarded_generated_dotnetcontrol_id" class="uniqueDivId"
</div>

Also are you sure the generated div id always changes?
sometimes it stays the same and u can just document.getElementsById("really_crappy_dotnetgenerantedposid")

to get your element.