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

Last Reply one year ago By pandeyism

Posted one year ago

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>

 

This question does not have replies that have been liked.