Cannot reuse a DataTable

Cannot reuse a DataTable

sfarzososfarzoso 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

Answers

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    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

  • sfarzososfarzoso Posts: 6Questions: 1Answers: 0
    edited March 2020

    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...

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    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

  • sfarzososfarzoso Posts: 6Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    Please provide the steps to show the problem.

    Kevin

  • sfarzososfarzoso Posts: 6Questions: 1Answers: 0
    edited March 2020

    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

  • sfarzososfarzoso Posts: 6Questions: 1Answers: 0

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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    edited March 2020 Answer ✓

    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

  • sfarzososfarzoso Posts: 6Questions: 1Answers: 0

    Thank you @colin have a good day! :)

This discussion has been closed.