[Solved] Records duplicating after adding in HTML Table using jQuery AJAX in ASP.Net

jovceka

SOLVED CLOSED ACTIVE ANSWERED
User: jovceka
Posted: on Jun 13, 2019 01:52 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 5545

here partial page refresh not working with server side page scroll for json ajax table when new data added to table.

i can make full page refresh with location.reload(true).

but Productbypage(currentPage) not working for partial refresh.

i mean adding Productbypage(currentPage) in success function for partial page updation.

any option to replace update panel with Productbypage(currentPage)?

     <script type="text/javascript"> 
         $(document).ready(function () {
             var currentPage = 1;
             Productbypage(currentPage);
             $(window).scroll(function () {
                 if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                     currentPage += 1;
                     Productbypage(currentPage);
                 }
             });
            $("#BtnaddProduct").click(function () {
                                
                 var ProdDetails = $('#TxtPdtdetail').val();
                 var OldPrice = $('#TxtoldOffprice').val();
                 var CurrentPrice = $('#TxtPdtCrrprice').val();
                 var OffDetails = $('#TxtPdtOffDetails').val();
                 var obj = {};
                 obj.OldPrice = OldPrice;
                 obj.CurrentPrice = CurrentPrice;
                 obj.OffDetails = OffDetails;
                 obj.ProdDetails = ProdDetails;
               
                 $.ajax({
                     type: "POST",
                     url: "/WebService.asmx/AddProduct",
                     data: '{data : ' + JSON.stringify(obj) + ' }',
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (data) {
                         alert("success");
                         Productbypage(currentPage);
 
                         // location.reload(true);here full page is reloading ,insteading of reloading the particular part(partial page refresh)..i.e.Productbypage()
                         
                     },
                     error: function (r) {
                         alert("failure");
                     },
                    
                 });
                 return false;
                 
             });
                       });
         function Productbypage(currentPageNumber) {
             $.ajax({
                
                // contentType: "application/json; charset=utf-8",
                 url: "/WebService.asmx/Productbypage",
                 method: 'post',
                 dataType: "json",
                 async: false,
                 data: { pageNumber: currentPageNumber, pageSize: 5 },
           
                 success: function (data) {
                 //  $('#dataTables-example tbody').remove();

                     var table = $('#Tables-example');
                    
                     var rows = "";
                     
                     //for (var i = 0; i < data.d.length; i++)
                     $(data).each(function (index, emp) {
                      //{
                        
                        
                         var Proddetails = emp.Proddetails;
                         var OldPrice = emp.OldPrice;
                         var CurrentPrice = emp.CurrentPrice;
                         var OffDetails = emp.OffDetails;
                      
                         rows += "<tr><td>" + Proddetails + "</td><td>" + OldPrice + "</td><td>" + CurrentPrice + "</td><td>" + OffDetails + "</td></tr>";
                          
                     });
                      table.append(rows);
                     
                 },
                 error: function () {
                     alert("Error while Showing update data");
                 }
             });
         } 
     </script>

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 9

Reply
ANSWER
User: pandeyism
Replied: on Jun 14, 2019 07:58 AM
Report

Hi jovceka,

Make the table empty before adding record to it.

$('#Tables-example').empty();

Refer below sample.

HTML

<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.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var currentPage = 1;
            Productbypage(currentPage);
            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    currentPage += 1;
                    Productbypage(currentPage);
                }
            });
            $("#BtnaddProduct").click(function () {
                var ProdDetails = $('#TxtPdtdetail').val();
                var OldPrice = $('#TxtoldOffprice').val();
                var CurrentPrice = $('#TxtPdtCrrprice').val();
                var OffDetails = $('#TxtPdtOffDetails').val();
                var obj = {};
                obj.OldPrice = OldPrice;
                obj.CurrentPrice = CurrentPrice;
                obj.OffDetails = OffDetails;
                obj.ProdDetails = ProdDetails;
                $.ajax({
                    type: "POST",
                    url: "WebService.asmx/AddProduct",
                    data: '{data : ' + JSON.stringify(obj) + ' }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        alert("success");
                        Productbypage(currentPage);
                    },
                    error: function (r) {
                        alert("failure");
                    }
                });
                return false;
            });
        });
        function Productbypage(currentPageNumber) {
            var obj = {};
            obj.pageNumber = currentPageNumber;
            obj.pageSize = 5;
            $.ajax({
                type: "POST",
                url: "WebService.asmx/Productbypage",
                data: JSON.stringify(obj),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var table = $('#Tables-example');
                    $('#Tables-example').empty();
                    var rows = "";
                    $(r.d).each(function (index, emp) {
                        var Proddetails = emp.Proddetails;
                        var OldPrice = emp.OldPrice;
                        var CurrentPrice = emp.CurrentPrice;
                        var OffDetails = emp.OffDetails;
                        rows += "<tr><td>" + Proddetails + "</td><td>" + OldPrice + "</td><td>" + CurrentPrice + "</td><td>" + OffDetails + "</td></tr>";
                    });
                    table.append(rows);
                },
                error: function (r) {
                    alert("Error while Showing update data");
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-12">
                <div class="panel panel-custom-horrible">
                    <div class="panel panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-bar-chart-o"></i>Add Products</h3>
                    </div>
                    <div class="panel panel-body">
                        <div class="form-group col-lg-4">
                            <label>
                                Old price</label>
                            <input type="text" name="Old Off" id="TxtoldOffprice" class="form-control" placeholder="Old price"
                                required="" />
                        </div>
                        <div class="form-group col-lg-4">
                            <label>
                                current price</label>
                            <input type="text" name="current OFF" id="TxtPdtCrrprice" class="form-control" placeholder="current price"
                                required="" />
                        </div>
                        <div class="form-group col-lg-4">
                            <label>
                                Off Details</label>
                            <input type="text" name="off details" id="TxtPdtOffDetails" class="form-control"
                                placeholder="off details like percentage off" required="" />
                        </div>
                        <div class="form-group col-lg-8">
                            <label>
                                product details</label>
                            <textarea class="form-control" rows="3" id="TxtPdtdetail"></textarea>
                            <div class="form-group col-lg-8">
                                <div style="float: right">
                                    <button class="btn btn-large btn-primary" type="button" id="BtnaddProduct">
                                        Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="panel panel-custom-horrible custhead">
                        <div class="panel panel-heading">
                            Product details
                        </div>
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <div id="Tables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <div class="row">
                                        <div class="table-responsive" id="tableproduct">
                                            <table id="Tables-example" class="table table-responsive table-striped table-bordered table-hover dataTable no-footer storetable"
                                                role="grid" aria-describedby="dataTables-example_info">
                                                <thead>
                                                    <tr role="row" class="srow">
                                                        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                                                            style="width: 110px;" aria-label="CSS grade: activate to sort column ascending">
                                                            Product Details
                                                        </th>
                                                        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                                                            style="width: 110px;" aria-label="CSS grade: activate to sort column ascending">
                                                            Old price
                                                        </th>
                                                        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                                                            style="width: 110px;" aria-label="CSS grade: activate to sort column ascending">
                                                            Current price
                                                        </th>
                                                        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                                                            style="width: 110px;" aria-label="CSS grade: activate to sort column ascending">
                                                            Off Details
                                                        </th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Code

WebService.cs

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [System.Web.Services.WebMethod]
    public string AddProduct(Products data)
    {
        string message = string.Empty;
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            SqlCommand cmd = new SqlCommand("sp_AddProduct");
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Proddetails", data.Proddetails);
            cmd.Parameters.AddWithValue("@OldPrice", data.OldPrice);
            cmd.Parameters.AddWithValue("@CurrentPrice", data.CurrentPrice);
            cmd.Parameters.AddWithValue("@OffDetails", data.OffDetails);
            cmd.Connection = con;
            con.Open();
            int i = cmd.ExecuteNonQuery();
            con.Close();
            if (i == 1)
            {
                message = "true";
            }
            else
            {
                message = "false";
            }
            con.Close();
            return message;
        }
    }

    [System.Web.Services.WebMethod]
    public Array Productbypage(int pageNumber, int pageSize)
    {
        List<Products> details = new List<Products>();
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("sp_pdt_page", con);
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Parameters.Add(new SqlParameter()
            {
                ParameterName = "@PageNumber",
                Value = pageNumber
            });
            cmd.Parameters.Add(new SqlParameter()
            {
                ParameterName = "@PageSize",
                Value = pageSize
            });
            using (var sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                DataTable TableData = new DataTable();
                TableData.Clear();
                sda.Fill(TableData);
                foreach (DataRow dtrow in TableData.Rows)
                {
                    Products user = new Products();
                    user.Productid = Convert.ToInt32(dtrow["Productid"].ToString());
                    user.Proddetails = dtrow["Proddetails"].ToString();
                    user.OldPrice = dtrow["OldPrice"].ToString();
                    user.CurrentPrice = dtrow["CurrentPrice"].ToString();
                    user.OffDetails = dtrow["OffDetails"].ToString();
                    details.Add(user);
                }
            }
        }
        return details.ToArray();
    }

    public class Products
    {
        public int Productid;
        public string Proddetails;
        public string OldPrice;
        public string CurrentPrice;
        public string OffDetails;
    }
}

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] Records duplicating after adding in HTML Table using jQuery AJAX in ASP.Net

Company

Explore

Follow us

Contact Us