I am working on adding child rows to a data table, and I get a “TypeError: undefined not function” for a line of code that works fine on another table and page. Any ideas?
HTML:
<div class="table-responsive"> <h2 class="sub-header">Account Users <a href="?q=support"><span class="glyphicon glyphicon-question-sign"></span></a></h2> <table id="users_table" class="table table-striped embedded_table"> <thead> <tr class="text-center"> <th></th> <th>User Name</th> <th>Full Name</th> <th>User Type</th> <th>Assigned Device</th> <th>Date Added</th> <th>Action</th> </tr> </thead> </table> </div>
Javascript / jQuery:
<script> function format ( d ) { var html = '<table id="child_table" class="text-right" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ '<tr>'+ '<td>Email Address:</td>'+ '<td>'+ d.email_address +'</td>'+ '<td>Time Zone:</td>'+ '<td>'+ d.timezone +'</td>'+ '</tr>'+ '<tr>'+ '<td>Create Date:</td>'+ '<td>'+ d.create_date +'</td>'+ '<td>Last Login:</td>'+ '<td>'+ d.last_login +'</td>'+ '</tr>'+ '</table>'; return html; } $(document).ready(function() { username = "<?php echo($_SESSION["username"]); ?>"; userType = "<?php echo($_SESSION["user_type"]); ?>"; var table = $('#users_table').dataTable({ order: [1, 'asc'], "ajax": { "url": "/s/user_data.php", "dataSrc" : "" }, "language": { "search": "Search: " }, "columns": [ {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"}, {"data": "username", "name": "username", "width": "20%"}, {"data": "fullName", "name": "fullName", "width": "20%"}, {"data": "type", "name": "type", "width": "15%"}, {"data": "cal_color", "name": "cal_color", "width": "15%"}, {"data": "create_date", "type": "date", "name": "create_date", "visible": false}, {"data": "time_zone", "name": "time_zone", "visible": false}, {"data": "last_login", "type": "date", "name": "last_login", "visible": false}, {"data": "email_address", "name": "email_address", "visible": false}, {"data": "uid", "name": "uid", "visible": false} ] }); // Add event listener for opening and closing details $('#users_table').find('tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr'); var td = $(this).closest('td'); var row = table.row(tr); console.log(tr); console.log(td); console.log(row); if(row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); td.removeClass('shown'); } else { // Open this row row.child(format(row.data())).show(); tr.addClass('shown'); td.addClass('shown'); } }); });
The line of code that generates the error is as follows. It is under the comment "Add an event listener to open and close parts" at the bottom of the script.
var row = table.row(tr);
As I said, I use the same listener in another table, and this row is not a problem. I checked my punctuation several times and don't see any missing commas, semicolons or quotes. You can see that I have 3 lines that are written to the console log. Here's what I get if I comment on an offensive line:
[tr.even, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…] [td.details-control, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…]
I am not a strong javascript or jQuery developer. All comments and suggestions are welcome.
Thanks.