Trying to using ajax to fill child rows.

rbyrns · December 2014

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 · December 2014

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 · December 2014

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 · December 2014

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

allan · December 2014

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 · December 2014

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 · December 2014

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 · December 2014

I pm'd you the link

rbyrns · December 2014

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.

Trying to using ajax to fill child rows.

Trying to using ajax to fill child rows.

Answers

Howdy, Stranger!

Categories

DataTables

Trying to using ajax to fill child rows.

Trying to using ajax to fill child rows.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables