My Child rows slider keeps duplicating rows

Ambient

This is working. However, when I first click it doesn't slide. on second click it does. However if I click another row it appends to the slide down rows. I have been staring at this for weeks and have gone code blind. Sorry the code is quite lengthy and part of a SBAdmin boot strap template therefore I can't share a link to code.

<script>

var x = '';
var k ='';
var v='';
var row='';
var data='';
var html='';
var total=0;


function format ( till, num ) {
    //console.log(till + ' ' + num);
    var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );
    var clickcount=0;
    var txt='';
    clickcount+=1;
    Obj=[];
    
             Obj =  new Array();
             $.ajax({
             type: "POST",
             url: 'Salesdetails3.php',
             data:{"num": num, "till": till},
             dataType: 'json', 
             statusCode: {
             404: function () { $("#response").text("Page not found"); },
             500: function () { $("#response").text("internal server error"); }
             },
             cache: false,
             success: function(response){ 
             //format ( data );
              Obj=[];
              Obj = response;
              for (x in response) {
              txt += response[x].Tillid + ' Line No:' + response[x].LineNo + ' ' +response[x].Productcode + ' ' + response[x].ProductDescription+' ' + parseFloat(response[x].LineSalePriceIncDisc).toFixed(2) +"\n";         
             }
          if (!txt){    ///CHECK IF ACCOUNT PAYMENT THEN SLIDE DOWN DETAILS OR DISPLAY ACCOUNT PAYMENT      
           html='<b><h5 style="color:black;">No Sales Details Found :</h5></b>' +
            //+ html + 
            '<td style="color: black;">' + '' + '</td>'+'<td>'+ '' +'</td>'+
             '</tr>'+
            //'<td>Customers Invoices:</td>'+
            '<td>'+' NO DETAILS '+'</td>'+ '<td>'+ 'NO SALE DETAILS FOUND - ACCOUNT PAYMENT PERHAPS' +'</td>'+
            '<tr>'+
            //'<td style="color: black;">Customer Name:</td>'+ '<td>'+ '<a href="'+ 'Link to something' +'">view</a>'  +'</td>'+
            //'<div id=' + "'tableGoesHere'" + 'class=' + "col-md-6" +'>' +
             '</tr>'+
             '<tr>'+
            '<td>Extra info:No details - Account Payment Perhaps?</td>'+'<td></td>'+
           // '<td>And any further details here (images etc)...</td>'+
            
            //'<td><b>Sale Total...</b></td>'+
            // '</tr>'+
            '</table>'
            
              // maybe do another Ajax call to get the Account details
            //return '<div class="slider">' + html
            }else{
                //format ( Obj );
               html='';
               var myJSON=JSON.stringify(Obj);
               //
               //console.log("MyJSON:     " + myJSON)
               //let q=object;    
               var len = myJSON.length;
               console.log("Length   " + len)
    
              //if(myJSON.length === 0){ return '<div class="slider">' + html};
              
              var data=JSON.parse(myJSON)
              //var data=JSON.stringify(obj);
              $.each(data, function(key, val) {
              $.each(val, function(k, v) {
              //row= '<tr>';
              row+='<td style="background-color:#f7f7f7" "color: black;">'+ v  + '</td>';
             // data+=row;
             
     });
     row+='</tr >';
 });
           data=row;
           //data+= '</tr >';      
           html='<b><h5 style="color:black;">Sale details below :</h5></b>' + 
           '<table cellpadding="5" cellspacing="0" border="3" style="padding-left:50px;" style="background-color:#f7fafa">' +
           '<table class="table table-bordered table-hover table-condensed">' +
           '<thead>' + 
           '<tr style="background-color:#f7fafa" "color: black;">' +
          <!-- '<th style="color:black; background-color: #ffffff;" font-size:12PT; "title="Field #1">Till</th>' +-->
           '<th  style="color:black; background-color: #ffffff;" font-size:12PT;" title="Field #2">LineNo</th>' +
           '<th style="color:black;  background-color: #ffffff;" font-size:12PT;" title="Field #3">Productcode</th>' +
           '<th style="color:black; background-color: #ffffff;" font-size:12PT;" title="Field #4">Description</th>' +
           '<th style="color:black;  background-color: #ffffff;" font-size:12PT;" title="Field #5">SalePrice</th>' +
           '<th style="color:black; background-color: #ffffff;" font-size:12PT;" title="Field #6">Tax</th>' +
           <!--'<th style="color:black; background-color: #ffffff;"font-size:12PT;" title="Field #6"></th>' +-->
           '<th style="color:black; background-color: #ffffff;"font-size:12pt;"title="Field #8">Tax %</th>' +
           '</tr></thead>' +
           '<td style="color:black; font-weight:bold background-color: #ffffff;">' + v + '</td>' +
           '<tr style="background-color:#f9fcfc">'
            + data + '</tr>' +  
           '<td>Extra info:</td>'+
           '<td>And any further details here (images etc)...2</td>'+
           '<td>More & more stuff...</td>'+
           '<td><b>Sale Total...</b></td>'+
           '</tr>'+
           '</table>'
             
            }
            }
            
           });
    
            data+=row //+ '</tr >';            
           
            return '<div class="slider">' + html 
            // Alert("In here");
    
                         }                           
</script>

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Sorry the code is quite lengthy and part of a SBAdmin boot strap template therefore I can't share a link to code.

That is a lot of code to try debugging just by looking at it. You should be able to take that code and build a test case using fake data.

Take a look at this section of the blog discussing how to add the animation. Note that $('div.slider', row.child()).slideDown(); is in the event handler not in the format() function. Looks like you are trying to return the div from the format function.

My suggestion is to start with a simple child detail example and adding the slider per the blog so you can see how it works. Then try updating your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Ambient

Thanks Kevin. I will try that. Sorry I made a mess of posting this but I couldn't find where to edit it.