Child row not displaying data on click

claryjaxon

I'm trying to implement the child row feature to display extra columns fetched from a google spreadsheet into a Datable I've setup via a combination of Datatables, Tabletop and Bootstrap scripts packaged on github.

I've modified the JS and CSS code according to your example page to the best of my abilities and have the open/close column successfully drawn, but no details. When I run the debugger it shows no errors so don't know what else to modify to get the detail columns to appear on click.

I'm beginning to wonder if there is other code in the package that might prevent this feature from working at all on my table.

Any help would be greatly appreciated.

Relevant links for my project:
HTML file: https://www.socialtheorywatch.org/database2.html
JS code:

//Edit 'key' and 'columns' to connect your spreadsheet

//enter google sheets key here
var key =
  "https://docs.google.com/spreadsheets/d/1glRSrNXIXOUYQ3h5dCYp96CfuAs6tZ8w8Gzul2PA7P4/pubhtml";

/* Formatting function for child row details */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="0" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Case summary:</td>'+
            '<td>'+d.caseSummary+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Prison sentence:</td>'+
            '<td>'+d.sentence+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Trial Judge at fault:</td>'+
            '<td>'+d.trialJudge+'</td>'+
        '</tr>'+
       '<tr>'+
            '<td>Attorney at fault:</td>'+
            '<td>'+d.caseAttorney+'</td>'+
        '</tr>'+
       '<tr>'+
            '<td>Cleared by:</td>'+
            '<td>'+d.clearedBy+'</td>'+
        '</tr>'+
       '<tr>'+
            '<td>Final result:</td>'+
            '<td>'+d.result+'</td>'+
        '</tr>'+
    '</table>';
}

//"data" refers to the column name with no spaces and no capitals
//punctuation or numbers in your column name
//"title" is the column name you want to appear in the published table
var columns = [{
           "className":       'details-control',
           "orderable":          false,
           "data":                  null,
           "defaultContent":  ''            
 }, {
   "data": "name",
  "title": "Name"
}, {
  "data": "citation",
  "title": "Citation"
}, {
  "data": "allegation",
  "title": "Allegation"
}, {
  "data": "province",
  "title": "Province"
}, {
  "data": "yearCrime",
  "title": "Year of Alleged Crime"
}, {
  "data": "yearConvicted",
  "title": "Year Convicted"  
}, {
  "data": "yearCleared",
  "title": "Year Cleared"
}, {
  "data": "cause",
  "title": "Cited Cause" 
}];

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
        writeTable(data); //call up datatables function
      },
      simpleSheet: true,
      debug: false
    });
  }

  initializeTabletopObject();

  function writeTable(data) {
    //select main div and put a table there
    //use bootstrap css to customize table style: http://getbootstrap.com/css/#tables
    $('#childRowTest').html(
      '<table cellpadding="4" cellspacing="4" border="1" class="table table-condensed table-bordered table-striped table-hover table-responsive" id="wrongfulConvictionDBSA"></table>'
    );

    //initialize the DataTable object and put settings in
    $("#wrongfulConvictionDBSA").DataTable({
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [
        [7, "desc"]
      ], //order on second column
      "pagingType": "simple_numbers" //'Previous' and 'Next' buttons, plus page numbers
      //"pageLength": 50
      //"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] 
        //uncomment these options to simplify your table
        //"paging": false,
        //"searching": false,
        //"info": false
    });
  }

  // Add event listener for opening and closing details
    $('#wrongfulConvictionDBSA tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
  
});
//end of writeTable

colin

Hi @claryjaxon ,

You're very close. The problem is a timing issue, due to the asynchronous nature of JS - you're defining the table in writeTable(), but the click events outside of it. That click event would be setup before the table was present, so it wouldn't have anything to latch onto.

If you move the block starting:

  $('#wrongfulConvictionDBSA tbody').on('click', 'td.details-control', function() {

into the end of the writeTable function, you should be good to go. Here's a screenshot of it working to give you hope

Cheers,

Colin

claryjaxon

Now l cannot get past new Syntax Error issues after moving the block as per your very helpful suggestion. The syntax errors are always related to unmatched brackets (missing or unexpected) and I've spent the last couple of hours fiddling with different bracket combinations placements to much frustration. The code below is only throwing an error at the last line (no matter how many closing brackets I input) Unrecoverable syntax error. (99% scanned) in JShint.com, and Uncaught SyntaxError: Unexpected token } on line 128 in Chrome console with debugger.

Would you mind helping me out with proper bracket placement? Or pasting the code you reconstructed to get that result in your screenshot?

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
        writeTable(data); //call up datatables function
      },
      simpleSheet: true,
      debug: false
    });
  }

  initializeTabletopObject();

  function writeTable(data) {
    //select main div and put a table there
    //use bootstrap css to customize table style: http://getbootstrap.com/css/#tables
    $('#childRowTest').html(
      '<table cellpadding="4" cellspacing="4" border="1" class="table table-condensed table-bordered table-striped table-hover table-responsive" id="wrongfulConvictionDBSA"></table>'
      );
  }
    // Add event listener for opening and closing details
    $('#wrongfulConvictionDBSA tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }

    //initialize the DataTable object and put settings in
    $("#wrongfulConvictionDBSA").DataTable({
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [
        [7, "desc"]
      ], //order on second column
      "pagingType": "simple_numbers" //'Previous' and 'Next' buttons, plus page numbers
      //"pageLength": 50
      //"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] 
        //uncomment these options to simplify your table
        //"paging": false,
        //"searching": false,
      //"info": false
    }
   );
  });
 });
});

claryjaxon

Hi @colin, Just adding the @ greeting to be sure you see my above response to your answer. Need help with refining the js code after reconstructing blocks as per your suggestions. Thanks.

kthorngren

Copied your code here:
http://live.datatables.net/helalami/1/edit

Looks like you have an extra }); at the end. Commented one of them out and the syntax errors are now gone. It can be hard to track down extra or missing }.

Kevin

claryjaxon

@kthorngren Thanks but unfortunately it didn't solve the problem. I pasted the js code exactly as you kindly provided and now the table doesn't load at all, and js debugger is not throwing any errors or breakpoints (tested it in both Firefox & Chrome).

However, when I post your modified code into JShint I get this result:

Four undefined variables
72 $
90 $
95 $
96 $
111 $
75 Tabletop
97 table
113 data

I'm still stumped. Is it possible to get the code @colin used to generate the screenshot of my table with the child rows working?

colin

Hi @claryjaxon ,

The problem is that you've moved that click block of code to the start of the function, not the end as I suggested. It needs to go after the table declaration, not before, something like this:

function writeTable(data) {
  //select main div and put a table there
  //use bootstrap css to customize table style: http://getbootstrap.com/css/#tables
  $('#childRowTest').html(
    '<table cellpadding="4" cellspacing="4" border="1" class="table table-condensed table-bordered table-striped table-hover table-responsive" id="wrongfulConvictionDBSA"></table>'
  );

  //initialize the DataTable object and put settings in
  $("#wrongfulConvictionDBSA").DataTable({
    "autoWidth": false,
    "data": data,
    "columns": columns,
    "order": [
      [7, "desc"]
    ], //order on second column
    "pagingType": "simple_numbers" //'Previous' and 'Next' buttons, plus page numbers
    //"pageLength": 50
    //"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
    //uncomment these options to simplify your table
    //"paging": false,
    //"searching": false,
    //"info": false
  });

  // Add event listener for opening and closing details
  $('#wrongfulConvictionDBSA tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });
}

When I got the code working before, I just reissued the click event handler in the console to test whether the code itself was sound. Hopefully the above will do the trick,

Cheers,

Colin

claryjaxon

@colin Thanks I appreciate all the help. Comparing your suggested code I now see that your suggestion involved simply removing the curly bracket on line 110 of my original code post in order to put the onClick function inside the writeTable function. However, when I run this I still get syntax errors. I suspect this has to do with ordering of all the functions and I'll have to keep fiddling with it until I get it working. I'll come back and mark this as answered with a comment on the proper order if I'm successful.

claryjaxon

@colin @kthorngren Any thoughts on why I'm getting this error now?

Uncaught ReferenceError: table is not defined

for the line var row = table.row( tr );

kthorngren

On this line $("#wrongfulConvictionDBSA").DataTable({ (95 in your first post) you can assign the variable table to the Datatables API, for example:

var table = $("#wrongfulConvictionDBSA").DataTable({
....

Kevin

claryjaxon

Thank you that worked!

claryjaxon

By the way I did need to add another closing curly bracket in between the last two }); sets at the end. Thanks @colin & @kthorngren again for helping me resolve the issues.