I've read other posts with similar names, but none of their problems matched mine nor did their solutions solve mine. I have a gridview with a linkbutton field which displays a modal(ish) box. Because the linkbutton field calls server side instead of client-side I couldn't get a JQUERY modal form to work. Instead, on linkbutton click I display an asp panel with CSS to make it look modal(ish). Within that panel I have an asp button that used to exit the modal by setting panel.visible = false.
However, when I click on the "exit" button it never calls the btnExitProject_Click sub procedure which hides the panel. Usually in design mode of Visual Studio I can double click on a button and it will show the "onClick" event in the server side code; however, right now it takes me to the page_load sub. I'm not sure what's going on. Other buttons on the page, outside of the panel work just fine and the "Join Project" button (see pic) which calls a jquery function works just fine as well.
<asp:Panel ID="pnlProjectInfo" runat="server" Visible="false">
<div class="overlay"></div>
<div class ="projectPanel">
<span class="spanStyle">Project Code: </span><asp:Label ID="lblProjectCode" runat="server" Text="[proj code]" CssClass="lblStyle1"></asp:Label><br /><br />
<span class="spanStyle">Entry Date: </span><asp:Label ID="lblEntryDate" runat="server" CssClass="lblStyle1"></asp:Label><br /><br />
<span class="spanStyle">Project: </span><br />
<asp:TextBox ID="tbProject" runat="server" Width="500px" CssClass="tbStyle1"></asp:TextBox><br />
<span class="spanStyle">Organization: </span><br />
<asp:TextBox ID="tbOrgName" runat="server" Width="395px" CssClass="tbStyle1" Enabled="false"></asp:TextBox><br />
<span class="spanStyle">Project Leader: </span><br /><asp:TextBox ID="tbProjLeader" runat="server" Width="196px" CssClass="tbStyle1"></asp:TextBox><br />
<span class="spanStyle">Description: </span><br /><asp:TextBox ID="tbDescription" runat="server"
Height="50px" Width="500px" TextMode="MultiLine" CssClass="tbStyle1"></asp:TextBox><br />
<span class="spanStyle">Comment: </span><br /><asp:TextBox ID="tbComment" runat="server"
Height="50px" Width="500px" TextMode="MultiLine" CssClass="tbStyle1"></asp:TextBox><br />
<br />
<span class="spanStyle">Project Members: </span>
<br />
<asp:GridView ID="gvProjectMembers" runat="server" AutoGenerateColumns="False"
CellPadding="3"
Width="512px" Font-Names="Arial" GridLines="Vertical" BackColor="White"
BorderColor="#333333" BorderStyle="Solid" BorderWidth="1px"
CssClass="projMembersGV">
<RowStyle BackColor="#ecf1ef" ForeColor="Black" HorizontalAlign="Center"
VerticalAlign="Top" />
<Columns>
<asp:BoundField DataField="individual_first_name" HeaderText="First Name" />
<asp:BoundField DataField="individual_last_name" HeaderText="Last Name" />
<asp:BoundField DataField="percentage_effort" HeaderText="Effort" />
<asp:BoundField DataField="participation_description"
HeaderText="Participation" />
<asp:BoundField DataField="active_indicator" HeaderText="Active" />
<asp:CommandField ButtonType="Button" ShowEditButton="True" />
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<EmptyDataTemplate>
No members assinged to this project in the database.
</EmptyDataTemplate>
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#ecf1ef" />
</asp:GridView>
<br />
<button id="create-user" type="button">Join Project</button> <!-- displays a jquery modal -->
<asp:Button ID="btnExitProject" runat="server" Text="Close" CssClass="btnClose" CausesValidation="false" Enabled="true" />
</div>
</asp:Panel>
Here's a look of the panel:
I decided to use JQuery instead of a server-side onclick event. This actually proved to be a great idea because the response time is much much quicker.
Replaced my btnExitProject with:
<input type="button" id="close_modal" value="Close"/>
I then added some jquery to the top of my page within the $(document).ready(function() {
$("#close_modal")
.button()
.click(function() {
$("#<%=pnlProjectInfo.ClientID %>").hide();
});
This just says that when the button with the "close_modal" id is clicked I need to hide my asp panel. Because the panel is asp the ID given to it in the code is not what the actual ID is read as, thus I had to put "#<%=pnlProjectInfo.ClientID %>"
to reference the panel.
Thanks for your help guys!