Div show hide not working when using UpdatePanel inside dev

Question

<div id="test1"  runat="server">
  <asp:UpdatePanel runat="server" ID="updTerms">
    <ContentTemplate>
      <asp:Button ID="btnSubmit"  Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
    </ContentTemplate>
  </asp:UpdatePanel>
</div>

<div id="test2" visible="false"  runat="server">
  <p>this is sample text.... bla bla bla</p>    
</div>

C# Code:

protected void btnSubmit_Click(object sender, EventArgs e)
{
  if (Page.IsValid) {
    // ...
    test1.Visible = false;
    test2.Visible = true;
  } else {    
    // do some thing...
  }
}

When Iam trying to set the visibility of the div=true in code behind it is still not showing — Mind Stalker, May 08 '14 at 13:18
So what you are having trouble is accessing the div properties? Also they must all be inside — Dillinger, Nov 08 '15 at 15:25
See this Answer , if you want to do without including control in UpdatePanel - http://stackoverflow.com/a/41877983/1060656 — aked, Jan 26 '17 at 16:18

score 4 · Answer 1 · answered May 08 '14 at 13:20

Only elements inside of the update panel will be updated when an update panel is triggered.

Since you only have the button in the update panel, the button is the only thing that will get updated, even though you set it in the code behind. You just have to wrap all the elements you want updated in the panel like so.

<asp:UpdatePanel runat="server" ID="updTerms">
    <ContentTemplate>
        <div id="test1" runat="server">
            <asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
        </div>
        <div id="test2" visible="false" runat="server">
            <p>this is sample text.... bla bla bla</p>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

score 2 · Answer 2 · answered May 08 '14 at 14:20

Try following Code:

<asp:UpdatePanel runat="server" ID="updTerms">
    <ContentTemplate>
        <div id="test1" runat="server">
            <asp:Button ID="btnSubmit"  Enabled="True" CssClass="asgButton" runat="server" Text="Submit" OnClick="btnSubmit_OnClick"/>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel runat="server" ID="updDiv2" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="test2" visible="false"  runat="server">
            <p>this is sample text.... bla bla bla</p>    
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

And in code-behind:

protected void btnSubmit_OnClick(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        test1.Visible = false;
        test2.Visible = true;
        updDiv2.Update();
    }
}

If you update controls from an UpdatePanel they have to be either in the same UpdatePanel or in another one.

If the controls are in another one make sure to call Update of the UpdatePanel containing the controls after editing them.

Make sure as well to set UpdateMode="Conditional" on the UpdatePanel otherwise Update would throw an exception.

score 0 · Answer 3 · answered May 08 '14 at 13:27

Cover your complete div inside update panel..You should place the controls which have to be updated inside update panel..

<asp:UpdatePanel runat="server" ID="updTerms">
    <ContentTemplate>
        <div id="test1" runat="server">
            <asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
        </div>
        <div id="test2" visible="false" runat="server">
            <p>this is sample text.... bla bla bla</p>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

score 0 · Answer 4 · answered Nov 13 '14 at 05:20

My suggestion is do not use Visible property.Instead do the following things

1)Remove Visibile="False" .Use Style="display:none"

<div id="test2" style="display:none"  runat="server">

2)Add the following javascript in the design page.

function divviZ()
{
    var test1=document.getElementById("<%=test1.ClientId%>");
    var test2=document.getElementById("<%=test2.ClientId%>");
    if(test2.style.display=="none")
    {test1.style.display="block";}
    else
    {test1.style.display="none";}
}

3)Change the vb code as follows

protected void btnSubmit_Click(object sender, EventArgs e)
{
   if (Page.IsValid) {
   // ...
   test2.style("display")="block"
   ScriptManager.RegisterClientScriptBlock(this, this.GetType, "divviz", "javascript:divviZ()", True)
 } else {    
      // do some thing...
 }

}

Div show hide not working when using UpdatePanel inside dev

4 Answers4