i trying out following jquery/asp.net code sample in visual studio 2013. unlike example below -- in exercise have placed c# code in code behind page , placed jquery code aspx markup. gridview displays data, when click on button alert not invoked. when try setting debugging on jquery, jquery code not being entered. grateful if point out missing:
code-behind
protected void page_load(object sender, eventargs e) { var mytestlist = new list<mytestclass1> { new mytestclass1 {id = 1, name = "name1"}, new mytestclass1 {id = 2, name = "name2"}, new mytestclass1 {id = 3, name = "name3"}, new mytestclass1 {id = 4, name = "name4"}, new mytestclass1 {id = 5, name = "name5"}, new mytestclass1 {id = 6, name = "name6"} }; gridview1.datasource = mytestlist; gridview1.databind(); } public class mytestclass1 { public int id { get; set; } public string name { get; set; } } markup
<%@ page language="c#" %> <%@ import namespace="system.collections.generic" %> <%@ import namespace="webapplication1" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <script runat="server"> //--i'm doing in code behind </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <form id="htmlform" runat="server"> <asp:gridview id="gridview1" runat="server" autogeneratecolumns="false" datakeynames="id"> <columns> <asp:templatefield> <itemtemplate> <asp:checkbox id="checkselect" runat="server" /> <asp:hiddenfield id="hdid" runat="server" value='<%# eval("id") %>' /> </itemtemplate> </asp:templatefield> <asp:templatefield> <headertemplate> name </headertemplate> <itemtemplate> <asp:label runat="server" text='<%# eval("name") %>'> </asp:label> </itemtemplate> </asp:templatefield> </columns> </asp:gridview> <br /> <asp:button id="btngetdata" runat="server" text="get data" /> javascript
var gridview1control = document.getelementbyid('<%= gridview1.clientid %>'); $('#<%= btngetdata.clientid %>').click(function(e) { //to uncheck header checkbox when there no selected checkboxes in itemtemplate $('input:checkbox[id$=checkselect]:checked', gridview1control).each(function(item, index) { var id = $(this).next('input:hidden[id$=hdid]').val(); alert(id); }); return false; });
its because element checkselect inside asp:gridview gridview1 gets id gridview1_chkselect_{row_index} , hdid gets id gridview1_hdid_{row_index}. here using selector $=
selects elements have specified attribute value ending given string. comparison case sensitive.
what need *=
selects elements have specified attribute value containing given substring.
change code this.
$('input:checkbox[id*=checkselect]:checked', gridview1control).each(function (item, index) { var id = $(this).next('input:hidden[id*=hdid]').val(); alert(id); }); 
Comments
Post a Comment