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...
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...
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" />
I'd suggest giving your panel a css class and then using jQuery selectors. If the radio button is a sibling of the panel:
var panel = $(this).siblings(".answer");
It depends where the panel sits in the generated markup, perhaps next or prev can be used instead. If you post the generated markup, I can update this answer.
Now we can see the markup (thanks) you need the parent and then the sibling like so:
<someOtherElement> <!-- the grid view container -->
<div class="answer"></div> <!-- sibling of parent (maybe <div runat="server"> is better than panel?) -->
<div> <!-- parent -->
<input type="radio"> <!-- this -->
</div>
</someOtherElement>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.