Remove duplicate rows in HTML Table after Insert on Button click using jQuery AJAX and Web Service

Last Reply one year ago By dharmendr

Posted one year ago

i m facing problem with duplicate rows after insert operation in my html table..i bind data with function getdata()...(marked as bind 1 in code). .after insertion ...data is binded using getdata()//(marked as bind 2)..)..but after insertion, repetation of rows occurs.... .ie each row displayed 2 times...but on refreshing page...its gone..when first getdata() is removed ..no preloading of data in table..but data loaded to json table properly after insertion.. i tried windows.load()..but alerts and pop ups not displayed properly..any solution for this...??..

         $(document).ready(function () {
             var id;
             getdata();//bind 1   
             $('#Btnaddstore').click(function () {             
                 var StoreName = $('#TxtStoreame').val();
                 var Storelink = $('#TxtStorelink').val();
                 var byteImage = reader.result;
                 byteImage = byteImage.split(';')[1].replace("base64,", "");
                 var obj = {};
                 obj.Name = StoreName;
                 obj.image = byteImage;
                 if (Name != '') {
                     $.ajax({
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         url: "/WebService.asmx/Adddata",                       
                         data: '{data : ' + JSON.stringify(obj) + ' }',
                         dataType: "json",
                         success: function (data) {
                             var obj = data.d;
                             if (obj == 'true') {
			  $('#lblmsg').html("Details Submitted Successfully").fadeOut(2222);
                               getData(); //bind 2                      
                             }
                             if (obj == 'false') {
                                 $('#TxtStoreame').val(''); 
                                 $('#lblmsg').html("name exists").fadeOut(2222);                             
                             }
                         },
                         error: function (result) {
                             alert("Error");                           
                         }
                     });
                 }
                 else {
                     alert('Please enter all the fields')
                     return false;
                 }
             })  
         });
         function getdata() {
             $.ajax({
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 url: "/WebService.asmx/Getdata",
                 data: {},
                 dataType: "json",
                 success: function (data) {
                   //  $('#dataTables-example tbody').remove();
                     //console.log(data.d);
                     var table = $('#dataTables-example');
                     var rows = "";
                     for (var i = 0; i < data.d.length; i++) {
                         var ID = data.d[i].ID;
                         var Name = data.d[i].Name;
                              var image = '<img class=imgstore width=100px height=100px, src="data:image/jpg;base64,' + data.d[i].image + '" />'
                              rows += "<tr><td>" + ID + "</td><td>" + Name + "</td><td>" + image + "</td>";
                              }
                     table.append(rows);
                 },
                 error: function () {
                     alert("Error while Showing update data");
                 }
             });
         }     

 

This question does not have replies that have been liked.