rows.Add issue SCRIPT5007: Unable to get property 'rows' of undefined or null reference
rows.Add issue SCRIPT5007: Unable to get property 'rows' of undefined or null reference
musclebreast
Posts: 3Questions: 2Answers: 0
Hi,
I have the following error:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<!--DataTable-->
<link rel="stylesheet" type="text/css" href="otps_enhancements/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="otps_enhancements/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
[// <script src="ajax.js"></script>
<!--Button-->
<link rel="stylesheet" type="text/css" href="otps_enhancements/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="otps_enhancements/DataTables/jszip-v3.1.5-1/dist/jszip.min.js "></script>
[// <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/pdfmake.min.js "></script>
<script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/vfs_fonts.js "></script>
<script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/buttons.html5.min.js"></script>
<style>
.tightTable {
padding-top: 20px;
padding-bottom: 20px;
background: linear-gradient(61deg,#090e2c 0,#122c69 59%,#078db3 100%);
background-color: #111b58;
padding-left:10px;
padding-right:10px;
}
</style>
<SCRIPT>
var table_global;
var tableData2;
function fillTableRecursive(startIndex) {
$.ajax({
url: "objId=script=none&startindex=" + startIndex + "&inputlabel1=",
success: function(data) {
var jsonData1 = $.parseJSON(data);
var tableData1 = jsonData1.data;
var tableColumns1 = jsonData1.columns;
console.log(tableData1.length );
console.log(tableData1 );
if (tableData1.length > 0) {
table_global.rows.add(tableData1[0]).draw();
if (tableData1.length >= 100) {
fillTableRecursive(startIndex + 100);
}
}
},
error: function() {
console.log("Error while receiving data starting at index " + startIndex);
}
});
}
$(document).ready(function() {
$("#example").hide();
$.ajax({
url: "objId=script&nexturl=none&startindex=1&inputlabel1=",
success: function(data){
try {
//window.alert(data);
//console.log(data);
var jsonData = $.parseJSON(data);
var tableData = jsonData.data;
tableData2 = jsonData.data;
var tableColumns = jsonData.columns;
console.log(tableData.length );
console.log(tableData );
var table_global = $('#example').DataTable({
dom: 'Bfrtip',
data: tableData,
paging: false,
buttons: [
'copy', 'excel', 'print'
]
});
// Setup - add a text input to each footer cell
// $('#example thead tr:eq(1) th').each( function () {
$('#example thead tr:eq(1) th').each( function () {
// console.log($(this));
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Suche '+title+'" class="column_search" />' );
} );
// specific column searchfiels
$( '#example thead' ).on( 'keyup input', ".column_search",function () {
table
.column( $(this).parent().index() )
.search( this.value )
.draw();
} );
$("#example").show();
fillTableRecursive(101);
}
catch(e) {
alert("ERROR: " + e);
}
},
error: function(){alert("ERROR2: " + e);
}
});
//fillTableRecursive(1);
}); // End of document ready function
</SCRIPT>
<div style="background-color:white">
<table width="100%" class="display" id="example">
<thead>
<tr id="dataid">
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
</table>
</div>
</head>
</html>
The initial load works. As next I call the function fillTableRecursive to add further rows. I call the same script and get the same object array back as in the initial load, but then I get the following error: SCRIPT5007: Unable to get property 'rows' of undefined or null reference
Has anybody a hint what can be the problem if I try to add the same result twice and in the first run it works but not in the second?
Many thanks,
Lara
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This question has an accepted answers - jump to answer
Answers
Looks like a scoping issue. You have
var table_global;in line 53 which sets a global variable, In the success function you havevar table_global = $('#example').DataTable({on 111. Thevarwill create the variabletable_globalwithin the scope of the success function. This is not accessible outside the function liketable_global.rows.add(tableData1[0]).draw();in thefillTableRecursive()function.Either remove the
varfrom line 111. Or get an instance of the API in thefillTableRecursive()function, like this:Kevin
Hi Kevin,
oh million thanks...You were right and it is working now:)
Thanks alot,
Lara