Trying to using ajax to fill child rows.

rbyrns

I decided that is was better to get my notes from a separate ajax call.
I have the function:

function format ( notes ){
            //var noteArray = notes;   //used to be notes.notes
            if(notes.length === 0){ return "<td>No Notes Found</td>"};
            console.log(notes.length);
            var i = 0;
            var len = notes.length;
            var out;
            for(;i<len; i++){
                out += '<tr><td>'+notes[i].type+'</td><td>'+notes[i].note+'</td></tr>'
            }
            return out;
      };

Below I have this:

    var detailRows = []; //sub row stuff
    $('#vert_test tbody').on('click','td.details-control', function(){
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var idx = $.inArray(tr.attr('id'), detailRows ); //??
    $.ajax({
        type:'GET',
        url: './php/table.vert_test.php?p=1',
        data: 'row='+tr.attr('id'),
    })
   
    if (row.child.isShown()){
    tr.removeClass('details');
    row.child.hide();
    
    // remove from the 'open' array
    detailRows.splice(idx,1); //??
    }
    else {
    tr.addClass('details');
    row.child(format(row.data())).show(); 
    //add to the open array
    if (idx=== -1){
        detailRows.push(tr.attr('id'));
    }
    }
    }); //end of click function

the ajax Get is firing, an array of notes is returning. Everything looks right, but the error is "TypeError: row.child(...) is undefined.

allan

but the error is "TypeError: row.child(...) is undefined.

Are you using $().DataTable() to initialise the table? It sounds like you might be using $().dataTable() (note the difference in capitalisation) - FAQs.

Regards,
Allan

rbyrns

This is my initialization code.

 editor = new $.fn.DataTable.Editor( {
        "ajax": "./php/table.vert_test.php",
        "idSrc": "uid",
        "table": "#vert_test",
            "stateSave":true,
            formOptions: {
            inline: {
            "submitOnBlur": "true", //true always when inline editing
            }
        },
        "fields": [
            {
                "label": "SI Number",
                "name": "sinum",
                "type": "text"
            },
            {
                "label": "Prefix",
                "name": "prefix",
                "type": "text"

//more code in middle

    $('#vert_test').DataTable( {
        
        "jQueryUI": true,
        "scrollY":400,
        "scrollX": true,
        "dom": 'T<"clear">lfrtip',
        "lengthMenu":[[25, 50, 100],[25,50,100]],
        "ajax":{
            url: "./php/table.vert_test.php",
            type: "POST",
            "data": function (d){
            d.min = $('#min').val();
            d.max = $('#max').val();
            d.field = $("#field").val();  //extra data from parent form
            }
        },

        "bProcessing":true,
        "bServerSide": true,
        "bAutowidth": true,
        table: "#vert_test",
        formOptions: {
            inline: {
                submitOnBlur: true
            }
        },
    
        "columns": [
        {
            "class":    ////etc...

rbyrns

Because this ajax call is just for the child rows and not the entire table, do I need to use DataSrc?

allan

You con't appear to assign $('#vert_test').DataTable(...); to anything. So where does the table variable in the code in your previous post come from?

Allan

rbyrns

Sorry, didn't get that part.

    var table = $('#vert_test').DataTable();
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
            .column( colIdx )
            .search( this.value )
            .draw();
        } );
    } );
    var detailRows = []; //sub row stuff
    $('#vert_test tbody').on('click','td.details-control', function(){
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var idx = $.inArray(tr.attr('id'), detailRows ); //??
    $.ajax({
        type:'GET',
        url: './php/table.vert_test.php?p=1',
        data: 'row='+tr.attr('id'),
    })


     
    if (row.child.isShown()){
    tr.removeClass('details');
    row.child.hide();
    
    // remove from the 'open' array
    detailRows.splice(idx,1); //??
    }
    else {
    tr.addClass('details');
    row.child(format(row.data())).show(); 
    //add to the open array
    if (idx=== -1){
        detailRows.push(tr.attr('id'));
    }
    }
    }); //end of click function

    // on each draw loop over the detailsRows and show any children
    editor.on('draw', function (){
        $('#'+id+'td:first-child').trigger('click');
    });
//// date range stuff
   $( "#min" ).datepicker( {
       "dateFormat": "yy-mm-dd",
    "onSelect": function(date) {
      min = new Date(date).getTime();
      table.draw();
    }
  } ).keyup( function () {
      var min= new Date(this.value).getTime();
      table.draw();
  } );
  
  $( "#max" ).datepicker( {
       "dateFormat": "yy-mm-dd",
    "onSelect": function(date) {
      var max = new Date(date).getTime();
      if(min != ''){ table.draw()};
    }
  } ).keyup( function () {
      max = new Date(this.value).getTime();
      table.draw();
  } );
$("#field").on('change',function(){
    table.draw();
});
      // end date range stuff 
 
//end displayTable functions 
//
} );

}(jQuery));

allan

Okay, that looks like it should probably work. I think I'd need a link to the page to see the error "in action" to be able to offer any help with it I'm afraid.

Allan

rbyrns

I pm'd you the link

rbyrns

For anyone else dealing with this issue: The following is my solution.

var detailRows = []; //sub row stuff
 
$('#vert_test tbody').on('click','td.details-control', function(){
var tr = $(this).closest('tr');
var idx = $.inArray(tr.attr('id'), detailRows ); //??
var row = table.row( tr );
    $.ajax({
    type:'GET',
    url: './php/table.vert_test.php?p=1',
    data: 'row='+tr.attr('id'),
        dataType: 'json',
    success: function(result){
        if (row.child.isShown()){
            tr.removeClass('details');
            row.child.hide();
            // remove from the 'open' array
            detailRows.splice(idx,1); //??
        }
        else {
            tr.addClass('details');
            row.child(format(result)).show();
            //add to the open array
            if (idx=== -1){
                detailRows.push(tr.attr('id'));
            }
        }
 
    }
});
  
}); //end of click function

The "format" function is

function format ( notes ){
            console.log(notes);
            var noteArray = notes.notes;   //used to be notes.notes
            if(noteArray.length === 0){ return "<td>No Notes Found</td>"};
            var i = 0;
            var len = noteArray.length;
            var out;
            for(;i<len; i++){
            out += '<tr><td>'+noteArray[i].type+'</td><td>'+noteArray[i].note+'</td></tr>'

            }
            return out;
      };

The main issue is that ajax is asynchronous. Also take note of the dataType:json. Without it, it was treating the results as a string.