"Uncaught TypeError: Cannot read property 'settings' of undefined" with SearchPanes 1.1.0
"Uncaught TypeError: Cannot read property 'settings' of undefined" with SearchPanes 1.1.0
Loren Maxwell
Posts: 406Questions: 99Answers: 10
I think this is a possible bug.
Link to test case:
There are two tables on this page. It's the lower one, which doesn't display.
https://ghsfha.org/w/Special:SeasonHome?view=players&season=2019
Debugger code (debug.datatables.net):
Error messages shown:
Uncaught TypeError: Cannot read property 'settings' of undefined
at Object.g.select.init (datatables.min.js:571)
at b._serverTotals (datatables.min.js:526)
at HTMLTableElement.<anonymous> (datatables.min.js:508)
at HTMLTableElement.dispatch (jquery.min.js:2)
at HTMLTableElement.v.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLTableElement.<anonymous> (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at jQuery.fn.init.each (jquery.min.js:2)
at jQuery.fn.init.trigger (jquery.min.js:2)
Description of problem:
I recently upgraded to SearchPanes 1.1.0 and now get the above error when using SearchPanes.
The following code (which works fine) doesn't use SearchPanes:
$(function() {
var table_all_state = $('#table_all_state').DataTable({
"paging": true,
"autoWidth": true,
"language": {
"zeroRecords": "<i class=\"fal fa-fw fa-empty-set\" data-toggle=\"tooltip\" title=\"No records\"></i>",
"search": "<i class=\"fal fa-fw fa-search\" data-toggle=\"tooltip\" title=\"Search records\"></i>",
"alphabetSearch": {
"infoDisplay": "<i class=\"fal fa-fw fa-filter\" data-toggle=\"tooltip\" title=\"Search records\"></i>"
}
},
"columnDefs": [{
"targets": "_all",
"render": $.fn.dataTable.render.text(),
"searchPanes": {
"show": false
}
}],
"ajax": {
"url": "/wiki/extensions/GHSFHA/models/mPlayersAllState.php",
"type": "POST",
"data": {
"season": "2019",
"school": null
}
},
"order": [4, "asc"],
"drawCallback": function(s) {
if (!this.api().rows().data().any()) {
$('#table_all_state_wrapper').children().hide();
} else {
$('#table_all_state_wrapper').children().show();
$('#table_all_state_wrapper .dt-buttons').children().show();
}
},
"columns": [{
"data": "source",
"name": "source"
}, {
"data": "selection",
"name": "selection",
"className": "text-center"
}, {
"data": "award",
"name": "award"
}, {
"data": "team_name",
"name": "team_name"
}, {
"data": "player_name",
"name": "player_name"
}, {
"data": "organization",
"name": "organization"
}, {
"data": "class",
"name": "class"
}, {
"data": "position",
"name": "position",
"className": "text-center"
}, {
"data": "grade",
"name": "grade",
"className": "text-center"
}, {
"data": "height",
"name": "height"
}, {
"data": "weight",
"name": "weight"
}],
"scroller": {
"loadingIndicator": true
},
"deferRender": true,
"scrollX": true,
"scrollY": "80vh",
"scrollCollapse": true,
"dom": "ftri"
}).on("mouseenter", "th, td:not(.child-row-container)", function() {
var $this = $(this);
if (this.offsetWidth < ($this.textWidth() + 10)) {
if (!$this.attr("title")) {
$this.attr("title", $this.text());
}
}
});
});
And here's the code with SearchPanes added that causes the error (although it worked with SearchPanes 1.0.0):
$(function() {
var table_all_state = $('#table_all_state').DataTable({
"paging": true,
"autoWidth": true,
"language": {
"zeroRecords": "<i class=\"fal fa-fw fa-empty-set\" data-toggle=\"tooltip\" title=\"No records\"></i>",
"search": "<i class=\"fal fa-fw fa-search\" data-toggle=\"tooltip\" title=\"Search records\"></i>",
"alphabetSearch": {
"infoDisplay": "<i class=\"fal fa-fw fa-filter\" data-toggle=\"tooltip\" title=\"Search records\"></i>"
}
},
"columnDefs": [{
"targets": "_all",
"render": $.fn.dataTable.render.text(),
"searchPanes": {
"show": false
}
}],
"ajax": {
"url": "/wiki/extensions/GHSFHA/models/mPlayersAllState.php",
"type": "POST",
"data": {
"season": "2019",
"school": null
}
},
"order": [4, "asc"],
"drawCallback": function(s) {
if (!this.api().rows().data().any()) {
$('#table_all_state_wrapper').children().hide();
} else {
$('#table_all_state_wrapper').children().show();
$('#table_all_state_wrapper .dt-buttons').children().show();
}
},
"columns": [{
"data": "source",
"name": "source",
/* Add SearchPane to this column */
"searchPanes": {
"show": true
}
}, {
"data": "selection",
"name": "selection",
"className": "text-center",
/* Add SearchPane to this column */
"searchPanes": {
"show": true
}
}, {
"data": "award",
"name": "award"
}, {
"data": "team_name",
"name": "team_name",
/* Add SearchPane to this column */
"searchPanes": {
"show": true
}
}, {
"data": "player_name",
"name": "player_name"
}, {
"data": "organization",
"name": "organization"
}, {
"data": "class",
"name": "class",
/* Add SearchPane to this column */
"searchPanes": {
"show": true
}
}, {
"data": "position",
"name": "position",
"className": "text-center",
/* Add SearchPane to this column */
"searchPanes": {
"show": true
}
}, {
"data": "grade",
"name": "grade",
"className": "text-center"
}, {
"data": "height",
"name": "height"
}, {
"data": "weight",
"name": "weight"
}],
/* Add SearchPane settings */
"searchPanes": {
"cascadePanes": true,
"layout": "columns-6"
},
"scroller": {
"loadingIndicator": true
},
"deferRender": true,
"scrollX": true,
"scrollY": "80vh",
"scrollCollapse": true,
/* DOM adjusted to add SearchPane */
"dom": "Pftri"
}).on("mouseenter", "th, td:not(.child-row-container)", function() {
var $this = $(this);
if (this.offsetWidth < ($this.textWidth() + 10)) {
if (!$this.attr("title")) {
$this.attr("title", $this.text());
}
}
});
});
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Hi @Loren Maxwell ,
I haven't managed to replicate this locally but I think I may have found the fix required anyway. You can access the fix from the nightly builds. Would you mind pulling this into your page instead of including SearchPanes from the CDN to confirm that this works? If not I will dig into it deeper.
Thanks,
Sandy
With the nightly build I get the functionality back.
Can you verify the exact css files from the nightly build and order of them that I'll need for Bootstrap 4?
Here's the page again for easy reference:
https://ghsfha.org/w/Special:SeasonHome?view=players&season=2019
Here's the order I'm using now, which is working, but I want to make it's correct:
https://nightly.datatables.net/searchpanes/css/common.scss
https://nightly.datatables.net/searchpanes/css/searchPanes.dataTables.min.css
https://nightly.datatables.net/searchpanes/css/dataTables.searchPane.min.css
https://nightly.datatables.net/searchpanes/css/searchPanes.bootstrap4.min.css
Hi @Loren Maxwell ,
You can use the download builder and then just convert to nightly urls. So...
would become
Hope this helps,
Sandy
@sandy, perfect!!!
Thanks for the help and quick response!