Getting error when passing json data to child table

Murray

Despite dataset2 containing valid json (I have checked it with Json lint) I get the error
Uncaught TypeError: Cannot set property 'data' of null
DataTables warning: table id=subservices - Invalid JSON response.
from

<script>
var dataset2 = '';
var subservicetable = '';

  jQuery(document).ready(function() {
     var servicestable =  jQuery('#services').DataTable( {
          data: <?php echo $dataset; ?>,
          responsive: true,
          autoWidth: true,
          searching: true,
                  select: true,
          columns: [
              { title: "Entry" },
                          { title: "Service" },
                          { title: "", "defaultContent": "<button onclick='editservice();'>Edit/Delete</button>" }
          ],
          "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          nRow.setAttribute('id',aData[0]);
          },
          dom: 'id',
          dom: 'Bfrtip',
          buttons: [
              'csv',
              'print',
                         {
                              text: 'Add Service',
                              action: function ( e, dt, node, config ) {
                                 addservice();
                              }
                         }
          ]
      } );

      subservicestable = jQuery('#subservices').DataTable( {
         aaData: dataset2,
          responsive: true,
          autoWidth: true,
          searching: true,
          columns: [
              { title: "Entry" },
                          { title: "Sub Service" },
                          { title: "", "defaultContent": "<button onclick='editsubservice();'>Edit/Delete</button>" }
          ],
          "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          nRow.setAttribute('id',aData[0]);
          },
          dom: 'id',
          dom: 'Bfrtip',
          buttons: [
              'csv',
              'print',
                         {
                              text: 'Add Sub Service',
                              action: function ( e, dt, node, config ) {
                                 addsubservice();
                              }
                         }
          ]
      } );

    servicestable.on( 'select', function (e) {
            jQuery('#services tr').click(function(e) {
                      e.stopPropagation();
                      var $this = jQuery(this);
                      var trid = $this.closest('tr').attr('id');

                      jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
                          dataset2 = data;
                          subservicestable.ajax.reload();
                      });
             });
    } );

});

Immediately before subservicestable.ajax.reload(); dataset2 contains:-

[["28","Discrimination"],["29","Actual Homelessness"],["30","Threatened Homelessness"],["31","Local Authority Homelessness Duty"],["32","Access to Accommodation"],["33","Local Authority Housing"],["34","Housing Association Property"],["35","Private Sector Rented Property"],["36","Owner Occupied Property"],["37","Environmental/Neighbour issues"],["38","Other"]]

Which json lint agrees is correct json format.

Any idea what I am getting wrong please.

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

kthorngren

Since you aren't using ajax to load the data the subservicestable.ajax.reload(); is probably failing in this code:

                      jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
                          dataset2 = data;
                          subservicestable.ajax.reload();
                      });

Instead of using ajax.reload() you will want to use rows.add() to populate the table with dataset2. You can use clear() to clear the table if desired.

Kevin

Murray

Many thanks for the reply.

The following works

 jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
 dataset2 = data;
 var table = jQuery('#subservices').DataTable();
 table.rows.add([["28","Discrimination"],["29","Actual Homelessness"],["30","Threatened Homelessness"],["31","Local Authority Homelessness Duty"],["32","Access to Accommodation"],["33","Local Authority Housing"],["34","Housing Association Property"],["35","Private Sector Rented Property"],["36","Owner Occupied Property"],["37","Environmental/Neighbour issues"],["38","Other"]]).draw();
                          
                      });

but

 jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
 dataset2 = data;
 var table = jQuery('#subservices').DataTable();
 table.rows.add(dataset2).draw();
                          
                      });

does not, giving the error
DataTables warning: table id=subservices - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

I have read the relevant information and substituting the following for dataset2 also returns a similar error:-

[
{"Entry": "28", "Sub Service": "Discrimination"},
{"Entry": "29", "Sub Service": "Actual Homelessness"},
{"Entry": "30", "Sub Service": "Threatened Homelessness"},
{"Entry": "31", "Sub Service": "Local Authority Homelessness Duty"},
{"Entry": "32", "Sub Service": "Access to Accommodation"},
{"Entry": "33", "Sub Service": "Local Authority Housing"},
{"Entry": "34", "Sub Service": "Housing Association Property"},
{"Entry": "35", "Sub Service": "Private Sector Rented Property"},
{"Entry": "36", "Sub Service": "Owner Occupied Property"},
{"Entry": "37", "Sub Service": "Environmental/Neighbour issues"},
{"Entry": "38", "Sub Service": "Other"}
]

What am I missing please.

kthorngren

In your working scenario each row is an array. Your ajax response each row is an object. Either change the response to provide an array or use columns.data to define the columns, like this example.

Kevin

Murray

Many thanks for your prompt reply. Unfortunately due most probably to my ignorance I am missing something. After the ajax call to subservices.php dataset2 contains as a string:
[["28","Discrimination"],["29","Actual Homelessness"],["30","Threatened Homelessness"],["31","Local Authority Homelessness Duty"],["32","Access to Accommodation"],["33","Local Authority Housing"],["34","Housing Association Property"],["35","Private Sector Rented Property"],["36","Owner Occupied Property"],["37","Environmental/Neighbour issues"],["38","Other"]]

Using the variable that contains the string does not work while replacing the variable with the string does.

This does not work

      subservicestable = jQuery('#subservices').DataTable( {
         data: dataset2,
          responsive: true,
          autoWidth: true,
          searching: true,
          columns: [
              { title: "Entry" },
                          { title: "Sub Service" },
                          {title: "", "defaultContent": "<button onclick='editsubservice();'>Edit/Delete</button>" }
          ],
          "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          nRow.setAttribute('id',aData[0]);
          },
          dom: 'id',
          dom: 'Bfrtip',
          buttons: [
              'csv',
              'print',
                         {
                              text: 'Add Sub Service',
                              action: function ( e, dt, node, config ) {
                                 addsubservice();
                              }
                         }
          ]
      } );

    servicestable.on( 'select', function (e) {
            jQuery('#services tr').click(function(e) {
                      e.stopPropagation();
                      var $this = jQuery(this);
                      var trid = $this.closest('tr').attr('id');

                      jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
                          dataset2 = data;
                          var table = jQuery('#subservices').DataTable();
                         table.rows.add(dataset2).draw();
                          
                      });
             });
   
    });

while this does

      subservicestable = jQuery('#subservices').DataTable( {
         data: dataset2,
          responsive: true,
          autoWidth: true,
          searching: true,
          columns: [
              { title: "Entry" },
                          { title: "Sub Service" },
                          {title: "", "defaultContent": "<button onclick='editsubservice();'>Edit/Delete</button>" }
          ],
          "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          nRow.setAttribute('id',aData[0]);
          },
          dom: 'id',
          dom: 'Bfrtip',
          buttons: [
              'csv',
              'print',
                         {
                              text: 'Add Sub Service',
                              action: function ( e, dt, node, config ) {
                                 addsubservice();
                              }
                         }
          ]
      } );

    servicestable.on( 'select', function (e) {
            jQuery('#services tr').click(function(e) {
                      e.stopPropagation();
                      var $this = jQuery(this);
                      var trid = $this.closest('tr').attr('id');

                      jQuery.get("../DataTables/subservices.php", {id:trid}, function(data) {
                          dataset2 = data;
                          var table = jQuery('#subservices').DataTable();
                         table.rows.add([["28","Discrimination"],["29","Actual Homelessness"],["30","Threatened Homelessness"],["31","Local Authority Homelessness Duty"],["32","Access to Accommodation"],["33","Local Authority Housing"],["34","Housing Association Property"],["35","Private Sector Rented Property"],["36","Owner Occupied Property"],["37","Environmental/Neighbour issues"],["38","Other"]]).draw();
                          
                      });
             });
   
    });

Please tell me what I should change in my code.

kthorngren

If dataset2 is a string, not a Javascript array, then you will need to use JSON.parse() to convert it to a Javascript array. For example change line 35 to this:

dataset2 = JSON.parse(data);

Kevin

Murray

Many thanks, that is what was missing.