Cannot read property 'length' of undefined
Cannot read property 'length' of undefined
wedwo
Posts: 2Questions: 0Answers: 0
I'm learning JQuery but pulling my hair out over this one. I have a simple data table and I'm trying to run code on footerCallback but whenever I include it in my code I get the above errormessage. Here's a URL to the page concerned:
https://dl.dropboxusercontent.com/u/101926939/test/test.html
My HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<link href="./ie10-viewport-bug-workaround.css" rel="stylesheet">
</head>
<body>
<div class="container theme-showcase" role="main">
<table id="mytable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">Col1</th>
<th class="text-center">Col2</th>
<th class="text-center">Col3</th>
<th class="text-center">Col4</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th class="text-right">Total:</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr id='item0'>
<td><input type="text" class="form-control col1"></td>
<td><input type="text" class="form-control col2"></td>
<td><input type="text" class="form-control col3"></td>
<td class="col4"></td>
</tr>
<tr id='item1'></tr>
</tbody>
</table>
<div class='btn-group'><a id='add_row' class='btn btn-default'>New Row</a></div>
<div class='btn-group'><a id='delete_row' class='btn btn-default'>Delete</a></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function()
{
$('input.col2').on('change', function(){
console.log('Col2 change');
var col2val = $(this).val(); //col2val = the value after change
var col3val = $(this).closest('tr').find('input.col3').val();
$(this).closest('tr').find('.col4').html(parseFloat(col2val)*parseFloat(col3val));
});
$('input.col3').on('change', function(){
console.log('Col3 change');
var col3val = $(this).val();
var col2val = $(this).closest('tr').find('input.col2').val();
$(this).closest('tr').find('.col4').html(parseFloat(col2val)*parseFloat(col3val));
});
var i=1;
$("#add_row").click(function(){
console.log('AddRow');
$('#item'+i).html("<td><input type='text' class='form-control name'></td><td><input type='text' class='form-control col2'></td><td><input type='text' class='form-control col3'></td><td class='col4'></td>");
$('#mytable').append('<tr id="item' + (i+1) + '"></tr>');
$('#item'+i+' input.col2').on('change', function()
{
console.log('Col2 change');
var col2val = $(this).val();
var col3val = $(this).closest('tr').find('input.col3').val();
$(this).closest('tr').find('.col4').html(parseFloat(col2val)*parseFloat(col3val));
});
$('#item'+i+' input.col3').on('change', function()
{
console.log('Col3 change');
var col3val = $(this).val();
var col2val = $(this).closest('tr').find('input.col2').val();
$(this).closest('tr').find('.col4').html(parseFloat(col2val)*parseFloat(col3val));
});
i++;
});
$("#delete_row").click(function(){
console.log('Delete Row');
if(i>1)
{
$("#item"+(i-1)).html('');
i--;
}
});
$('#mytable').dataTable({
"footerCallback": function ( row, data, start, end, display )
{
debugger;
console.log ("Footer Callback");
$( api.column( 4 ).footer() ).html('Working');
}
});
});
</script>
</body>
</html>
The piece invoking the error starts at line 108. For now all I want is the footerCallback to fire and it to say 'Working' in the footer far right column.
$('#mytable').dataTable({
"footerCallback": function ( row, data, start, end, display )
{
debugger;
console.log ("Footer Callback");
$( api.column( 4 ).footer() ).html('Working');
}
});
Any help is appreciated
This discussion has been closed.
Replies
You have a row without columns
<tr id='item1'></tr>, most likely that causes the problem.Excellent, thanks gyrocode. That resolves that issue.
However, it looks as if it's being used as part of the 'add row' function. That function won't work without it. Do you know of another approach to adding a row then?
Why are you not using DataTables add row and remove rows functionality?
Yes - you would need to use the DataTables API to add and remove rows from an initialised table. See this FAQ for why.
Allan