How to reload and redraw table with non ajax data

stichcomber

I can see this question asked several times in this forum, however, I have not been able to find a solution that works for me. I realize there are different solutions for ajax and non ajax data. I have tried both ways but unfortunately, neither appears to solve my problem.

I have a DataTable called skiTable. It consists of rows of ski mountains. In each row, there is a button called FlyTo with latitude and longitude (aa_x, aa_y). When clicked, it zooms into the ski mountain using mapbox gl js (map.flyTo). Once the map is zoomed in, map.on('moveend', ...) is triggered which in turn gets the new data with getUniqueFeatures() and returns data to datatable of just the displayed mountains in aDemoItems. Sometimes there can be surrounding mountains and therefore the row count, after zooming in, can be anywhere from 0 mountain to 203 mountains but the error, Cannot read properties of undefined (reading 'properties') in $('#ski_index tbody').on( 'click', 'button', function () {} occurs when I zoom in and the datatable is recreated.

map.on('moveend', 'aa_winter_spoorts_points', (e) => {
     const uniqueFeatures = getUniqueFeatures(featuresRendered, 'id');
     let skidata = JSON.stringify(uniqueFeatures);
     var aDemoItems = uniqueFeatures;
     let skiTable = $('#ski_index').DataTable({
                stateSave:      true,
                stateDuration:  60 * 60 * 48, // save the state for 2 days.
                responsive:     true,
                info:           true,
                destroy:        true,
                //retrieve:       true,
                data:           aDemoItems,
                // I have also tried with ajax and $('#ski_index').DataTable().ajax.reload(); in the below click handler
                 //ajax:           function(data, callback) {
                 //                   callback({ data: aDemoItems })
                 //              },
                dataType:       'json', 
               "columns": [
                    //0
                    {
                        data: null,
                        "defaultContent": "<i>Not set</i>",
                        render: function (data, type, row){
                            //console.log(row.properties.aa_y);
                            return '<button>FlyTo!</button>'    
                        }
                    },
                   // snipped all the other columns to read easier.
                    ]   
            });
     $('#ski_index tbody').on( 'click', 'button', function () {
                var aa_Latitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_x"];
                var aa_longitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_y"];
                console.log(aa_Latitude + ', ' + aa_longitude);
                // is case of ajax, have tried:  $('#ski_index').DataTable().ajax.reload(); but the error is 
                // Cannot read properties of undefined (reading 'properties')

                // in case of non ajax, I have tried below with same error.
                $('#skiTable').DataTable().clear().destroy();
     }

Here is some debugger info:

Information about 1 table available
#ski_index
Data source:    Ajax (( as said above have tried ajax and non ajax methods)
Processing mode:    Client-side
Draws:  2
Columns:    11
Rows - total:   203
Rows - after search:    203
Display start:  0
Display length: 10

All up to date except;

Library/ Info/ Installed/ Latest
DataTables/ New version available/ 1.10.25/ 1.13.1
Responsive/ New version available/ 2.2.9/ 2.4.0

15 tests complete. No failures or warnings found!

kthorngren

It looks like you are creating the click event inside the map.on() event handler. Each click will then add a new event handler. The first click will work, the second will fail because there are now two events being handled. A third would cause three events.

Either move the event hander creation outside the map.on() or turn off the event before recreating it, like this:

     $('#ski_index tbody')
     .off( 'click', 'button')
     .on( 'click', 'button', function () {
                var aa_Latitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_x"];
                var aa_longitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_y"];
                console.log(aa_Latitude + ', ' + aa_longitude);
                // is case of ajax, have tried:  $('#ski_index').DataTable().ajax.reload(); but the error is
                // Cannot read properties of undefined (reading 'properties')
 
                // in case of non ajax, I have tried below with same error.
                $('#skiTable').DataTable().clear().destroy();
     }

Kevin

stichcomber

Thanks. Giving it a whirl.

stichcomber

Thank you Kevin. Have tested it all out and it works well. I will need to read more about event handling. The option that worked best for me was adding the .off('click', 'button'). Thanks again!!