Cannot reuse a DataTable
Cannot reuse a DataTable
sfarzoso
Posts: 6Questions: 1Answers: 0
I've three datatables which are initialized when a bootstrap modal is opened. When I open the modal for the first time all works well, but when I close the modal and the open it again and click on a specific row (which display the details of that row) I get:
cannot get property_id of undefined
this is my code:
window.UserArea = window.UserArea || {};
(function (exports) {
exports.initialize = function () {
initDataTable('#tour-table', 'area');
initDataTable('#price-table', 'price');
initDataTable('#feature-table', 'features');
}
/**
* Initialized a DataTables
* @param {String} ref Table reference
* @param {String} filter AJAX post filter
*/
function initDataTable(ref, filter) {
let opts = [
{ data: 'name' },
{ data: 'title' },
{ data: 'description' },
{
data: null,
render: function (data, type, row) {
return '<div class="text-right" data-property-id="' + data.property_id + '">' +
'<a href="#" class="btn btn-link btn-warning btn-just-icon view-property"><i class="material-icons">dvr</i></a></div>';
}
}
];
let tbl = DataTableHelper.initDataTable(
ref,
opts,
GlobalVariables.baseUrl + '/user/ajax_get_suggested_prop',
{
filter,
customer_id: $('#customer-id').val()
}, undefined, undefined, function () {
// Display the details of a clicked row
tbl.on('click', '.view-property', function (e) {
let tr = $(e.currentTarget).closest('tr');
let data = tbl.row(tr).data();
console.log(data.property_id);
});
});
}
})(window.UserArea)
so I call initialize method when the Bootstrap modal is opened:
$('#my-modal').on('shown.bs.modal', function () {
UserArea.initialize();
});
then I click on view-property available inside a Datatables row, and all works fine. I close the modal, reopen it and click another time on view-property, I get the error above from this console.log(data.property_id);
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Sounds similar to the issue in this thread from yesterday where opening the child rows fails. Looks like you are adding a
clickevent each time you callinitDataTable()without removing the previous events. See the solution options provided in the other thread.Kevin
Hi @kthorngren and thanks for the answer, I tried with:
but I have the same problem, is there something that I'm missing? Also I added this behavior:
so the click event shouldn't be added again...
Can you post a link to your page or a test case replicating the issue so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Do you get multiple outputs for the
console.log(data.property_id);statement?You can do some additional debugging in the click event to see what
tranddataare.Kevin
@kthorngren I just created a working example for you, download here
Please provide the steps to show the problem.
Kevin
Hi Kevin here the steps:
the weird thing is that I get 1 duplicated and then undefined. In the production code I get only undefined, perhaps 'cause I download new data
hey @kthorngren do you have some news for this? thanks
There are a few things going on there:
clear()after the initialisation to clear down the existing data in the tableonis continually adding event listeners. So the error is coming from the previous event listener which is usingdtfrom the the older table initialisation.See example updated here.
Colin
Thank you @colin have a good day!