The Dreaded TypeError: Cannot read property 'oFeatures' of null - how to solve it?
The Dreaded TypeError: Cannot read property 'oFeatures' of null - how to solve it?
Joyrex
Posts: 92Questions: 14Answers: 3
I'm currently trying to implement a button to clear the filtered results on a dataTable, and while it DOES clear the field and reset the filtering, I get the dreaded "TypeError: Cannot read property 'oFeatures' of null" JS error. I've read similar posts on it, and for the life of me cannot see what's wrong with my code - keep in mind I'm implementing dataTables with Twitter Bootstrap 3.0.0 (using Alan's code for Bootstrap 3/dataTables posted to GitHub), along with my own custom changes (display changes; no changes to underlying JS files other than the inline code below. Can anyone help me see the obvious?
[code]
$(document).ready( function() {
oTable = $('#memberLogs').dataTable( {
"bLengthChange": true,
"aaSorting": [[ 2,"desc"]],
"iDisplayLength": 10
});
$('#memberLogs_length label select').addClass('form-control');
$('#memberLogs_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
$('#memberLogs_filter input').addClass('form-control').attr('placeholder','type to filter results').wrap('').after('');
$('button.btn.btn-danger').click(function(){
$('#memberLogs_filter input').val('');
oTable.fnFilter('');
});
});
[/code]
The really strange thing is similar code works fine with Bootstrap 2.x (I had developed this code for Bootstrap 2.x originally) - I can't see how it could be anything Bootstrap is doing, but I could be wrong. I've posted that below for reference as well.
[code]
$(document).ready( function() {
oTable = $('#tblMembers').dataTable( {
"sDom": "<'row-fluid hidden-phone'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bLengthChange": true,
"bStateSave": true,
"sCookiePrefix": "members_",
"aaSorting": [[ 0,"asc"]],
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": "_MENU_ Records per page"
}
});
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sSearch": "Filter records"
});
$('#tblMembers_filter label input').attr('placeholder','type to filter results').addClass('search-query').wrap('').after('');
$('i.icon.icon-remove').click(function(){
$(this).parent().find('input').val('');
oTable.fnFilter("");
});
});
[/code]
[code]
$(document).ready( function() {
oTable = $('#memberLogs').dataTable( {
"bLengthChange": true,
"aaSorting": [[ 2,"desc"]],
"iDisplayLength": 10
});
$('#memberLogs_length label select').addClass('form-control');
$('#memberLogs_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
$('#memberLogs_filter input').addClass('form-control').attr('placeholder','type to filter results').wrap('').after('');
$('button.btn.btn-danger').click(function(){
$('#memberLogs_filter input').val('');
oTable.fnFilter('');
});
});
[/code]
The really strange thing is similar code works fine with Bootstrap 2.x (I had developed this code for Bootstrap 2.x originally) - I can't see how it could be anything Bootstrap is doing, but I could be wrong. I've posted that below for reference as well.
[code]
$(document).ready( function() {
oTable = $('#tblMembers').dataTable( {
"sDom": "<'row-fluid hidden-phone'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bLengthChange": true,
"bStateSave": true,
"sCookiePrefix": "members_",
"aaSorting": [[ 0,"asc"]],
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": "_MENU_ Records per page"
}
});
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sSearch": "Filter records"
});
$('#tblMembers_filter label input').attr('placeholder','type to filter results').addClass('search-query').wrap('').after('');
$('i.icon.icon-remove').click(function(){
$(this).parent().find('input').val('');
oTable.fnFilter("");
});
});
[/code]
This discussion has been closed.
Replies
Turns out that I had a common element between both script calls (the oTable.fnFIlter) and it was getting confused as to which script I was referring to - I commented out the second script call, and sure enough, the error went away. I ended up moving the script calls into the blocks of code on my page that dynamically determine which dataTable to display, so the relevant script call is included only.
If you are using more than one dataTable on your page, this might be the cause - hope this helps you!