Populate HTML Table with CheckBox Check Uncheck based on Database column using jQuery AJAX

Last Reply one month ago By dharmendr

Posted one month ago

hello..

i want my list of checkbox in json ajax table checked/unchecked with respect to database value when data.d[i].status == "true"..currently all the checkboxes are getting checked with this code..what correction do i need to make..

         function GetProduct() {
             $.ajax({
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 url: "/WebService.asmx/products",
                 data: {},
                 dataType: "json",
                 success: function (data) {
                   
                      for (var i = 0; i < data.d.length; i++)
                      {                          
                              $('#example').find('input[id=chk1]').each(function () {
                              if (data.d[i].status == "true")
                              {                                
                               
                                $(this).prop('checked',true);
                                            
                         $("#example").append(
                              "<tr><td>" + data.d[i].ProductName + "</td>" +
                             "<td>" + data.d[i].Proddetails + "</td>" +
                             
                                       "<td><input type=checkbox id=chk1 ></td>" +
                              "</tr>");
                      }
                    
                 },
                 error: function () {
                     alert("Error");
                 }
             });
         }

everything is working fine..but all checkbox checked when true..not on status ncondition..plz help..

Posted one month ago Modified on one month ago

Hi jovceka,

Check this example. Now please take its reference and correct your code.

HTML

<table id="example">
    <tr>
        <th>ProductName</th>
        <th>Proddetails</th>
        <th>Status</th>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        GetProduct();
    });
    function GetProduct() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/Products",
            data: {},
            dataType: "json",
            success: function (data) {
                var table = $('#example');
                var rows = "";
                for (var i = 0; i < data.d.length; i++) {
                    var name = data.d[i].ProductName;
                    var details = data.d[i].Proddetails;
                    var status = data.d[i].Status;
                    rows += "<tr><td>" + name + "</td><td>" + details + "</td>";
                    if (status == "true") {
                        rows += "<td><input type=checkbox id=chk1 checked=checked ></td></tr>";
                    }
                    else {
                        rows += "<td><input type=checkbox id=chk1 ></td></tr>";
                    }
                }
                table.append(rows);
            },
            error: function (response) {
                alert("Error while Showing update data");
            }
        });
    }
</script>

C#

using System.Collections.Generic;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public List<Product> Products()
    {
        List<Product> productList = new List<Product>();
        productList.Add(new Product { ProductName = "Chai", Proddetails = "Soft drinks, coffees, teas, beers, and ales", Status = "true" });
        productList.Add(new Product { ProductName = "Aniseed Syrup", Proddetails = "Sweet and savory sauces, relishes, spreads, and seasonings", Status = "false" });
        productList.Add(new Product { ProductName = "Manjimup Dried Apples", Proddetails = "Dried fruit and bean curd", Status = "false" });
        productList.Add(new Product { ProductName = "Carnarvon Tigers", Proddetails = "Seaweed and fish", Status = "true" });

        return productList;
    }

    public class Product
    {
        public string ProductName { get; set; }
        public string Proddetails { get; set; }
        public string Status { get; set; }
    }
}

VB.Net

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebServiceVB
    Inherits System.Web.Services.WebService

    <WebMethod()>
    Public Function Products() As List(Of Product)
        Dim productList As List(Of Product) = New List(Of Product)()
        productList.Add(New Product With {
            .ProductName = "Chai",
            .Proddetails = "Soft drinks, coffees, teas, beers, and ales",
            .Status = "true"
        })
        productList.Add(New Product With {
            .ProductName = "Aniseed Syrup",
            .Proddetails = "Sweet and savory sauces, relishes, spreads, and seasonings",
            .Status = "false"
        })
        productList.Add(New Product With {
            .ProductName = "Manjimup Dried Apples",
            .Proddetails = "Dried fruit and bean curd",
            .Status = "false"
        })
        productList.Add(New Product With {
            .ProductName = "Carnarvon Tigers",
            .Proddetails = "Seaweed and fish",
            .Status = "true"
        })
        Return productList
    End Function

    Public Class Product
        Public Property ProductName As String
        Public Property Proddetails As String
        Public Property Status As String
    End Class
End Class

Screenshot