Access to <div> from javascript and code

Question

I have a div with style = "display: none". The div should become visible when you click the html button:

function JSAdd() { document.getElementById('divDetail').style.display = "block"; } <div style="float:left"> <div id="ctl00_MainContent_upnlLbRD"> <select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;"> <option value="5">one</option> <option value="1">two</option> </select> 

  <input id="btnAdd" type="button" value="" onclick="JSAdd();" /> <input id="btnEdit" type="button" value="" onclick="JSEdit();" /> </div> <div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static"> <div id="ctl00_MainContent_upnlDescription"> <div> <span id="ctl00_MainContent_lblDescription">:</span> <input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" /> <span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">    </span> </div> <input type="submit" name="ctl00$MainContent$btnSave" value="" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_btnSave" /> 

I need to make the div invisible from code again. I cannot access the div unless it is runat="server" . But when I add runat = "server", the div does not become visible when I click the button from the above javascript function. Could you help me with this?

Thanks,
David

Answer 1

You can access the div element in your code by adding the runat="server" attribute. Adding this attribute changes the way an element is accessed in JavaScript:

 var el = document.getElementById("<%=div1.ClientID%>"); if (el){ el.style.display = "none"; //hidden } 

There are two ways to customize visibility using code, but since you set display:none in JavaScript, you probably want to use the same encoding approach:

 div1.Style["display"] = "block"; //visible 

In the reverse code, you can also set the Visible property to false, but this is different because it will prevent the element from rendering at all.

EDIT

If the div is still displayed with display:none present, you probably have a hidden tag or quote that somewhere affects the markup. Double check and make sure the markup is valid.

Answer 2

You have several options, use ClientIDMode="Static" or use the dynamic ClientID at runtime. Both of these options give you server-side access to the object.

Dynamic:

  <div id="divDetail" runat="server" /> //or <asp:panel id="divDetail" runat="server" /> function JSAdd() { document.getElementById('<%= divDetail.ClientID %>').style.display = "block"; } //to hide from code-beind divDetail.Attributes.Add("style","display:none;"); 

Static (.NET 4.0 +):

  <div id="divDetail" runat="server" ClientIdMode="Static"> //or <asp:panel id="divDetail" runat="server" ClientIdMode="Static" /> function JSAdd() { document.getElementById('divDetail').style.display = "block"; } 

Answer 3

Use Panel , it displays a classic div

 <asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" /> 

Answer 4

When runat="server" is applied to an element, asp.net ensures that it has a unique identifier by controlling it. Just ask asp.net for a real client id:

 function JSAdd() { document.getElementById("<%=div1.ClientID%>").style.display = "block"; } 

Alternatively, you can tell asp.net to leave its ID on its own by adding this to your div:

 <div id="div1" runat="server" clientidmode="Static"> 

Resources

ClientIdMode = "Static" documents

Answer 5

In ASP.NET, to make identifiers unique (if multiple controls are loaded where the same ID is specified), the identifier on the elements often follows an agreement like ctl00_container1_container2_controlID , and this is what was returned when control.ClientID called.

If you are considering a case where the server has the same identifier and you have loaded these two controls on your page, you might consider using jQuery, and using runat="server" would make life easier by simply matching the identifier with end part:

 function JSAdd() { $("div[id$=divDetails]").show(); } 

Answer 6

The simplest method would be to use Javascript / Jquery to Changes Show Div property. if not, then you can use the following code

 <form method="post" runat="server"> <div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div> <asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" /> <asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" /> </form> 

code by code is as follows

  protected void displayDiv(object sender, EventArgs e) { div1.Style.Clear(); div1.Style.Add("display", "block"); } protected void hideDiv(object sender, EventArgs e) { div1.Style.Clear(); div1.Style.Add("display", "none"); } 

Guess you have a solution