Row object undefined after re-initializing dynamically generated data table with new parameter.

jcoder

I have a data table that displays report info for a selected team. This table is generated when the user selects a team name from a drop-down. When the user clicks on a row in the generated table, a modal appears and is populated with data from the selected row.

Everything works as expected until the user selects a different team from the drop-down without refreshing the page. The data in the table displayed is exactly what is expected. HOWEVER, when the user clicks on a row to trigger the modal, the row object is undefined.

JS:

$(document).ready(function() {

            document.getElementById('teamsButton').innerHTML = 'Select Team  ' + '<span class="caret"></span>';
        });

        $('#teamsDropdown').on('click','.teamSelection', function() {
           
            var teamName = $(this).text();
            console.log("teamName selected from dropdown:", teamName);

                document.getElementById('teamsButton').innerHTML = teamName + '  ' + '<span class="caret"></span>';

            $("#teamReportsTable").DataTable({
                    destroy: true,

                    "ajax": {
                        "url": "/TeamReports/GetTeamReports?id=" + teamName,
                        "type": "GET",
                        "contentType": "application/json; charset=utf-8",
                        "datatype": "json"
                    },
                    "columns": [
                        {
                            "order": "",
                            "title": " ",
                            "data": "Path",
                            "orderable": false,
                            "render": function(type, data) {
                                return '<a target="_blank"  id="teamReportLink"><i class="fa fa-eye" id="viewReportIcon"></i></a>';
                            }
                        },
                        {
                            "title": "Category",
                            "data": "Folder"
                        },
                        {
                            "title": "Report Name",
                            "data": "Name"
                        },
                        {
                            "title": "Description",
                            "data": "Description",
                            "render": function(data, type) {
                                return type === 'display' && data.length > 80? '<span title="' + data + '">' + data.substr(0, 38) + '...</span>': data;
                            }
                        }
                    ],

                    aaSorting: [[1, 'asc']],

                    initComplete: function() {
                        //FILTER TABLE BY CATEGORY:
                        this.api().column(1).every(function() {
                            var column = this;
                            var select = $('<select><option value="">All Categories<option></select>').appendTo($(column.header()).empty()).on('change',function() {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                column.search(val ? '^' + val + '$' : '', true, false).draw();
                            });
                            column.data().unique().sort().each(function(d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>');
                            });
                        });


                        //REPORT ROW CLICK EVENT:
                        var table = $('#teamReportsTable ').DataTable();
                        $('#teamReportsTable tbody').on('click','tr',function(e) {

                            var rowData = table.row(this).data();

                            console.log("rowData", rowData);

                            if (e.target.id === "viewReportIcon") {
                                document.getElementById('teamReportLink').href = rowData.Path = rowData.Path.replace("//", "/").replace(":/", "://");
                            } else {
                                //REPORT DETAIL MODAL FUNCTIONALITY:
                                var teamReportCreationDate = moment(rowData.teamReportCreationDate).format("MMMM Do YYYY");

                                document.getElementById('teamReportName').innerHTML = rowData.Name;
                                document.getElementById('teamModalCategory').innerHTML = 'Category: ' + rowData.Folder;
                                document.getElementById('teamModalteamReportCreationDate').innerHTML = 'Created: ' + teamReportCreationDate;
                                document.getElementById('teamModalPath').href = rowData.Path = rowData.Path.replace("//", "/").replace(":/", "://");

                                if (rowData.Description === "") {
                                    document.getElementById('teamModalDescription').innerHTML = 'A description has not yet been provided for this report.';
                                } else {
                                    document.getElementById('teamModalDescription').innerHTML = rowData.Description;
                                }

                                if (rowData.ModifiedDate !== null) {
                                    var modifiedDate = moment(rowData.ModifiedDate).format("MMMM Do YYYY");
                                    document.getElementById('teamModalModifiedDate').innerHTML = 'Last Modified: ' + modifiedDate;
                                };
                                    $('#teamteamReportDetailModal').modal('show');
                            };
                            
                        });

                    }

                });
            });

jcoder

I was able to resolve this issue by adding the following to the dropdown click event function before initializing the table...

            if ($.fn.DataTable.isDataTable( '#teamReportsTable' ) ) {
                $("#teamReportsTable").dataTable().fnDestroy();
                $('#teamReportsTable').empty(); 
            }