Question

I’ve got a panel inside a gridview.
When I click a radio button in my grid view I call the jquery click event
of the radio button. That part is working fine…now I need to reference the panel that is inside my gridview, but I cannot use $this because that refers to my radiobuttonlist (i think it does).

How can I get a reference to this panel.

            $("#MainContent_gvLineItems input[id*='rbAnswer']").click(function () {
                var p = $(this).find('[id$=MainContent_gvLineItems_pnlAnswer]'); // find the panel but this wont work so what can I do here?
            });

I dont know if my syntax is even right for id$=MainContent_gvLineItems_pnlAnswer being that the panel id changes for each row in the grid view…

Edit

Here is some of the grid view:

<asp:TemplateField HeaderText="Answer">
                            <ItemTemplate>
                               <div id="dMainAnswer">
                                <asp:RadioButtonList ToolTip="Please provide an answer to the method." RepeatDirection="Horizontal" ID="rbAnswer" runat="server" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.AnswerID")%>'>
                                    <asp:ListItem Text="Yes" Value="Yes" style="color:green;"></asp:ListItem>
                                    <asp:ListItem Text="No" Value="No" style="color:red;"></asp:ListItem>
                                    <asp:ListItem Text="N/A" Value="N/A" style="color:gray;"></asp:ListItem>
                                    <asp:ListItem Value="" Text="" style="display: none" />
                                </asp:RadioButtonList>
                                   <asp:Panel ID="pnlAnswer" runat="server" Visible="False">
                                       <div id="dMainAnswerResponsibleType">
                                            <asp:RadioButtonList ID="rbRespType" ToolTip="Select responsible contact type." runat="server" RepeatDirection="Horizontal" AutoPostBack="true" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.ResponsiblePartyType")%>' OnSelectedIndexChanged="rbRespType_SelectedIndexChanged">
                                                <asp:ListItem Selected="True" Text="TKSE" Value="TKSE">TKSE</asp:ListItem>
                                                <asp:ListItem Text="Other" Value="Other">Other</asp:ListItem>
                                                <asp:ListItem Value="" Text="" style="display: none" />
                                            </asp:RadioButtonList>
                                        </div>
                                        <div id="dMainAnswerResponsible"><a href="#" onclick="return false;" class="info">Res:<span>Select who is responsible in resolving this issue.</span></a>
                                             <asp:DropDownList ID="ddlEmployees" runat="server" 
                                                DataSource="<%# GetEmployees() %>" SelectedValue='<%# Eval("TKSEContact") %>' DataTextField="FullName" Width="75px"
                                                DataValueField="FullName" 
                                                ToolTip="Select the TKSE responsible party.">
                                            </asp:DropDownList>
                                            <asp:TextBox ID="txtContact" Text='<%# Eval("ResponsiblePartyContact") %>' Width="75px" MaxLength="50" runat="server" ToolTip="Enter the responsible contact name." Visible="false"></asp:TextBox>
                                        </div>
                                        <div id="dDueDate"><a href="#" onclick="return false;" class="info">Due:<span>Select the due date when you expect this issue to be resolved.</span></a>
                                            <asp:TextBox ID="txtDueDate" Text='<%# Eval("DueDate") %>' Width="59px" runat="server" ToolTip="Select the due date." CssClass="datePickerDueDate"></asp:TextBox>
                                        </div>
                                        <div id="cSendToSugar">
                                            <asp:CheckBox ID="chkSendToSugar" ToolTip="Send/Update issue to Sugar?" BackColor="Gold" Text="Send To Sugar?" Checked="true" runat="server" />
                                        </div>
                                   </asp:Panel>
                               </div>
                            </ItemTemplate>
                                <FooterStyle HorizontalAlign="Center" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Center" />
                            </asp:TemplateField>

Notice the panel pnlAnswer, its initially set to invisible Visible=False. It also isnt a sibling of the radiobutton list..at least I dont think it is…

Answer 1

Use .parents to find the parents of the element; if you give it a css class, you can do:

$(this).parents(".class:first")

To find it. I assume the panel is a parent to the radiobuttonlist. Otherwise, you’d want to use another Jquery method. This works as long as the panel is visible, or hidden using:

<asp:Panel .. style="display:none" />