Reputation: 5249
I am having issues showing up or hiding a Panel on a button click. By default the panel is hidden but I want the panel to show up once the button is clicked and it is not working for me now.
The only time the panel shows up is when another post-back occurs, like when I select drop down and that triggers a post-back then my panel will show up. I think the issue is that I am using an UpdatePanel
and which is only doing a partial post back.
Here is the code where I am using AsyncPostBackTrigger
for my control (Button).
<div id="dvGrid" style="padding: 10px; width: 876px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width="870px" OnRowDataBound="RowDataBound"
AutoGenerateColumns="False" Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
HeaderStyle-BackColor="green" ShowFooter="True" OnPageIndexChanging="OnPaging"
DataKeyNames="DEV_SK">
<AlternatingRowStyle BackColor="#C2D69B" />
<Columns>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="ID" Visible = "false">
<ItemTemplate>
<asp:Label ID="lblDEV_SK" runat="server" Text='<%# Eval("DEV_SK")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10px" />
</asp:TemplateField>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>
</asp:UpdatePanel>
</div>
and here is the the code for the button:
<asp:Button ID="btnUpdate" runat="server" Text="SAVE" OnClick = "Update" Visible = "true"
Font-Bold="False" Font-Size="Large" Height="30px" Width="157px"/>
and here is the code behind once they click the button:
protected void Update(object sender, EventArgs e)
{
Panel1.Visible = true;
//do somthing else
}
and here is my Panel:
<div>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Groove" Height="109px" Visible="false"
Width="870px" BackColor="#FFFFE1">
<asp:Label ID="Label2" runat="server" Text="SIGN" Font-Bold="True"
ForeColor="#FF3300"></asp:Label>
<br />
<br />
<asp:Label ID="lblUID" runat="server" Text="User ID:"></asp:Label>
<asp:TextBox ID="txtUID" runat="server" Height="22px" Width="145px"></asp:TextBox>
<asp:Label ID="lblPass" runat="server" Text="Password:"></asp:Label>
<asp:TextBox ID="txtPass" runat="server" Height="23px" TextMode="Password" style="margin-top: 0px"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="183px"
onclick="btnSubmit_Click"
OnClientClick="return confirm('Are you sure you want to submit?');"
Font-Bold="False" Font-Size="Medium" Height="30px"
style="margin-right: 1px" />
<br />
</asp:Panel>
</div>
Upvotes: 0
Views: 14445
Reputation: 1118
Since you already have the IDs of you DOM elements, you can achieve this by using JQuery.
<head>
<script src='https://code.jquery.com/jquery-1.12.4.min.js' >
<script>
$(document).ready( function() {
$('#btnSubmit').click(function(e) {
$('#Panel1').toggle(); //Show or Hide
e.preventDefault();
});
});
</script>
Upvotes: 0