Cannot reuse a DataTable

sfarzoso

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);

kthorngren

Sounds similar to the issue in this thread from yesterday where opening the child rows fails. Looks like you are adding a click event each time you call initDataTable() without removing the previous events. See the solution options provided in the other thread.

Kevin

sfarzoso

Hi @kthorngren and thanks for the answer, I tried with:

$(tbl).off();
 tbl.on('click', '.view-property', function (e) {
       let tr = $(e.currentTarget).closest('tr');
       let data = tbl.row(tr).data();
       console.log(data.property_id);
});

but I have the same problem, is there something that I'm missing? Also I added this behavior:

 if (!$(ref).hasClass('initialized')) {

    tbl.on('click', '.view-property', function (e) {
       let tr = $(e.currentTarget).closest('tr');
       let data = tbl.row(tr).data();
       console.log(data.property_id);
   });

  $(ref).addClass('initialized');

}

so the click event shouldn't be added again...

kthorngren

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 tr and data are.

Kevin

sfarzoso

@kthorngren I just created a working example for you, download here

kthorngren

Please provide the steps to show the problem.

Kevin

sfarzoso

Hi Kevin here the steps:

1. Open Google Chrome Dev console
2. click on launch demo modal
3. click on "dvr" (no matter which row) you will see displayed the id of the clicked row in console
4. close the modal
5. open the modal again
6. click on "dvr" again, you will see undefined

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

sfarzoso

hey @kthorngren do you have some news for this? thanks

colin

There are a few things going on there:

1. your header has three columns, but only two are being defined in the DataTables initialisation
2. you need a clear() after the initialisation to clear down the existing data in the table
3. the on is continually adding event listeners. So the error is coming from the previous event listener which is using dt from the the older table initialisation.

See example updated here.

Colin

sfarzoso

Thank you @colin have a good day!