ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2017 www.aspforums.com. All rights reserved.Filter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net<p>Hi <a class="username" rel="aneri"> aneri</a>,</p> <p>Let me know where you have saved the images?</p>http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/Wed, 04 Jan 2017 03:05:49 GMTFilter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net<p>i have stored images in database using productid</p> <p>means 8.jpg like that</p> <p>and in vs i have folder that is&nbsp;</p> <p>images/ProductName</p> <p>where imgae are stored by productid and extension</p> <p>and in database ony extension are stored</p>http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/Wed, 04 Jan 2017 03:10:00 GMTFilter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net<p>&nbsp;</p> <pre class="brush: css">&lt;title&gt;&lt;/title&gt; &lt;script src=&#34;http://code.jquery.com/jquery-git2.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;link href=&#34;StyleSheet.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $(&#39;.category&#39;).on(&#39;change&#39;, function () { var category_list = []; $(&#39;#list :input:checked&#39;).each(function () { var category = $(this).val(); category_list.push(category); }); if (category_list.length == 0) $(&#39;.resultblock&#39;).fadeIn(); else { $(&#39;.resultblock&#39;).each(function () { var item = $(this).attr(&#39;data-tag&#39;); if (jQuery.inArray(item, category_list) &gt; -1) $(this).fadeIn(&#39;slow&#39;); else $(this).hide(); }); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;table&gt; &lt;tr&gt; &lt;td rowspan=&#34;2&#34;&gt; &lt;div class=&#34;container card&#34;&gt; &lt;label class=&#34;text&#34;&gt; Color&lt;/label&gt; &lt;asp:TextBox ID=&#34;txtnames&#34; class=&#34;textbox&#34; runat=&#34;server&#34; placeholder=&#34;Search Color&#34; onkeyup=&#34;filter(this)&#34; /&gt; &lt;ul id=&#34;list&#34; runat=&#34;server&#34; style=&#34;list-style-type: none;&#34;&gt; &lt;/ul&gt; &lt;div id=&#34;filters&#34; runat=&#34;server&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan=&#34;2&#34;&gt; &lt;div class=&#34;searchresults&#34; runat=&#34;server&#34; id=&#34;resultdata&#34;&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan=&#34;2&#34;&gt; &lt;div id=&#34;sugg&#34; runat=&#34;server&#34; visible=&#34;false&#34;&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script type=&#34;text/javascript&#34;&gt; function filter(element) { var value = $(element).val(); $(&#34;#list &gt; li&#34;).each(function () { if ($(this).text().search(value) &gt; -1) { $(this).show(); } else { $(this).hide(); } }); } &lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(&#34;.resultblock&#34;).click(function () { var item = $(this).attr(&#39;ColorID&#39;); $(&#34;input:checked&#34;).each(function () { $(this).prop(&#34;checked&#34;, false); }); }); &lt;/script&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { fillcolor(); } } public void fillcolor() { string str = string.Empty; string str1 = string.Empty; string result = string.Empty; clsColor objcolor = new clsColor(true); clsColorProduct objProduct = new clsColorProduct(true); objcolor.getColor(); for (int i = 0; i &lt; objcolor.ListclsColor.Count; i++) { str += &#34;&lt;li&gt;&lt;div class=&#39;filterblock&#39;&gt;&lt;input type=&#39;checkbox&#39; id=&#34; + objcolor.ListclsColor[i].ColorID + &#34; name=&#39;check&#39; value=&#34; + objcolor.ListclsColor[i].ColorName + &#34; class=&#39;category&#39;&gt;&lt;div class=&#39;font&#39;&gt;&lt;div class=&#39;Color&#39; style=background-color:&#34; + objcolor.ListclsColor[i].ColorCode + &#34;&gt;&lt;/div&gt;&lt;/div&gt;&lt;label class=&#39;font&#39; for=&#34; + objcolor.ListclsColor[i].ColorID + &#34;&gt;&#34; + objcolor.ListclsColor[i].ColorName + &#34;&lt;/label&gt;&lt;/div&gt;&lt;/li&gt;&#34;; if (objcolor.ListclsColor[i].ColorID != 0) { str1 += &#34;&lt;td&gt;&lt;div class=&#39;resultblock&#39; ColorID=&#34; + objcolor.ListclsColor[i].ColorID + &#34; data-tag=&#34; + objcolor.ListclsColor[i].ColorName + &#34;&gt;&lt;div class=&#39;desc&#39;&gt;&lt;div class=&#39;desc_text&#39;&gt;&lt;div class=&#39;main&#39;&gt;&lt;div class=&#39;sub&#39;&gt;&lt;div class=&#39;box&#39;&gt;&#34; + objcolor.ListclsColor[i].ColorName + &#34;&lt;span class=&#39;&#39;&gt;&lt;img height=&#39;10px&#39; style=&#39;margin-left: 4px;margin: 0px 0px -1px 4px;&#39;/&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&#34;; objProduct.getColorp(); for (int j = 0; j &lt; objProduct.ListclsColorProduct.Count; j++) { if (objcolor.ListclsColor[i].ColorID == objProduct.ListclsColorProduct[j].ColorID) { result += &#34;&lt;td&gt;&lt;div class=&#39;resultblock&#39; data-tag=&#34; + objcolor.ListclsColor[i].ColorName + &#34;&gt;&lt;div class=&#39;desc&#39;&gt;&lt;div class=&#39;desc_text&#39;&gt;&lt;img width=&#39;100px&#39; src=&#39;&#34; + ConfigurationManager.AppSettings[&#34;path&#34;].ToString() + &#34;Product_Color/Product_Color/a/&#34; + objProduct.ListclsColorProduct[j].ProductID + &#34;/&#34; + objProduct.ListclsColorProduct[j].ProductID + &#34;.jpg&#34; + &#34;&#39; alt=&#39;&#34; + objProduct.ListclsColorProduct[j].ProductName + @&#34;&#39; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&#34;; sugg.Visible = true; } } } } list.InnerHtml = str; filters.InnerHtml = result; sugg.InnerHtml = str1; } } </pre> <p>&nbsp;</p>http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/Wed, 04 Jan 2017 04:27:17 GMTFilter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net<p>Hi <a class="username" rel="aneri">aneri</a>,</p> <p>I have created a sample which full fill your requirement you need to modify it according to your need.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&gt; &lt;table border=&#34;0&#34; cellpadding=&#34;0&#34; cellspacing=&#34;0&#34;&gt; &lt;tr&gt; &lt;td&gt; Category:- &lt;/td&gt; &lt;td&gt; &lt;div id=&#34;dynamicCheckBoxes&#34; runat=&#34;server&#34;&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:Label ID=&#34;lblCount&#34; runat=&#34;server&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;table id=&#34;tblColorImages&#34;&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { var selectedColors = []; $(&#39;input[name=chkbox]&#39;).click(function () { $.each($(&#39;input[name=chkbox]&#39;), function () { var checked = $(this)[0].checked; if (checked) { selectedColors.push($(this).val()); } }); if (!$(this)[0].checked) { //For removing the unchecked checkbox values. removeItem = $(this).val() selectedColors = jQuery.grep(selectedColors, function (value) { return value != removeItem; }); } //values of checked checkboxes. var colorId = selectedColors; if (colorId != &#34;&#34;) { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetSelectedColorImages&#34;, data: &#39;{colorId: &#34;&#39; + colorId + &#39;&#34;}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { $(&#39;[id*=tblColorImages]&#39;).empty(); var table = $(&#39;[id*=tblColorImages]&#39;) var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var ColorImages = xml.find(&#34;ColorImages&#34;); $(&#39;[id*=lblCount]&#39;).html(&#34;Total Record:-&#34; + ColorImages.length); $(&#39;[id*=tblColorImages]&#39;).append(&#34;&lt;tr&gt;&lt;th colspan=&#39;2&#39;&gt;Images&lt;/th&gt;&lt;/tr&gt;&#34;); //Append Data Row. $.each(ColorImages, function () { var ProductId = $(this).find(&#39;ProductId&#39;).text(); var ColorId = $(this).find(&#39;ColorId&#39;).text(); var ProductName = $(this).find(&#39;ProductName&#39;).text(); var ImgExtension = $(this).find(&#39;ImgExtension&#39;).text(); var row = $(&#34;&lt;tr /&gt;&#34;); row.append(&#34;&lt;td&gt;&#34; + ColorId + &#34;&lt;/td&gt;&lt;td&gt;&lt;img src=&#39;images/ProductName/&#34; + ProductName + ImgExtension + &#34;&#39;&gt;&lt;/img&gt;&lt;/td&gt;&#34;); $(&#39;[id*=tblColorImages]&#39;).append(row); }); } }); } else { $(&#39;[id*=tblColorImages]&#39;).empty(); $(&#39;[id*=lblCount]&#39;).html(&#34;&#34;); } }); }); &lt;/script&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">C#</span></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //Bind Your checkboxes according to your database table. DataTable dt = new DataTable(); dt.Columns.Add(&#34;ColorId&#34;); dt.Columns.Add(&#34;ColorName&#34;); dt.Rows.Add(1, &#34;Red&#34;); dt.Rows.Add(2, &#34;Blue&#34;); dt.Rows.Add(3, &#34;Black&#34;); dt.Rows.Add(4, &#34;Green&#34;); dt.Rows.Add(5, &#34;Yellow&#34;); string strHtm1 = string.Empty; for (int i = 0; i &lt; dt.Rows.Count; i++) { strHtm1 += &#34;&lt;input type=&#39;checkbox&#39; name=&#39;chkbox&#39; value=&#39;&#34; + dt.Rows[i][&#34;ColorId&#34;].ToString() + &#34;&#39;/&gt;&#34; + dt.Rows[i][&#34;ColorName&#34;].ToString() + &#34;&lt;/br&gt;&#34;; } dynamicCheckBoxes.InnerHtml = strHtm1.ToString(); } } [System.Web.Services.WebMethod] public static string GetSelectedColorImages(string colorId) { string strConnString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; SqlConnection con = new SqlConnection(strConnString); string query = &#34;SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (&#34; + colorId + &#34;)&#34;; SqlCommand cmd = new SqlCommand(query); SqlDataAdapter sda = new SqlDataAdapter(cmd); cmd.Connection = con; DataSet ds = new DataSet(); DataTable dt = new DataTable(&#34;ColorImages&#34;); sda.Fill(dt); ds.Tables.Add(dt); return ds.GetXml(); }</pre> <p><span style="text-decoration: underline;">VB.Net</span></p> <pre class="brush: vb">Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then &#39;Bind Your checkboxes according to your database table. Dim dt As New DataTable() dt.Columns.Add(&#34;ColorId&#34;) dt.Columns.Add(&#34;ColorName&#34;) dt.Rows.Add(1, &#34;Red&#34;) dt.Rows.Add(2, &#34;Blue&#34;) dt.Rows.Add(3, &#34;Black&#34;) dt.Rows.Add(4, &#34;Green&#34;) dt.Rows.Add(5, &#34;Yellow&#34;) Dim strHtm1 As String = String.Empty For i As Integer = 0 To dt.Rows.Count - 1 strHtm1 += &#34;&lt;input type=&#39;checkbox&#39; name=&#39;chkbox&#39; value=&#39;&#34; + dt.Rows(i)(&#34;ColorId&#34;).ToString() + &#34;&#39;/&gt;&#34; + dt.Rows(i)(&#34;ColorName&#34;).ToString() + &#34;&lt;/br&gt;&#34; Next dynamicCheckBoxes.InnerHtml = strHtm1.ToString() End If End Sub &lt;System.Web.Services.WebMethod()&gt; _ Public Shared Function GetSelectedColorImages(colorId As String) As String Dim strConnString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim con As New SqlConnection(strConnString) Dim query As String = (Convert.ToString(&#34;SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (&#34;) &amp; colorId) + &#34;)&#34; Dim cmd As New SqlCommand(query) Dim sda As New SqlDataAdapter(cmd) cmd.Connection = con Dim ds As New DataSet() Dim dt As New DataTable(&#34;ColorImages&#34;) sda.Fill(dt) ds.Tables.Add(dt) Return ds.GetXml() End Function</pre> <p><span style="text-decoration: underline;">ScreenShot</span></p> <p><span style="text-decoration: underline;"><img src="http://i988.photobucket.com/albums/af3/mudassarkhan/136699.gif" alt="" width="446" height="396" /></span></p>http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/http://www.aspforums.net/Threads/136699/Filter-Records-from-dynamically-created-CheckBoxes-and-Populate-in-HTML-Table-using-jQuery-Ajax-in-ASPNet/Wed, 04 Jan 2017 07:40:47 GMT