Question

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:

Answer 1

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!