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

Last Reply 7 months ago By pandeyism

Posted 7 months 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.