I was having a problem regarding Datatables, when i try to edit my data from the datatable it goes all well, after the datatable refreshes my edit / delete buttons does not work and it throws this kind of error Uncaught TypeError: Cannot read property '_aData' of undefined.

Here is my UI for the datatable. Datatable image here.

Here is my code for the event for the edit.

$('#template_table tbody').on('click','.update',function(){
    var closestRow = $(this).closest('tr');
    var data = templateTable.row(closestRow).data();
    console.log(data);
    tableId = data.id;
    $('#modal-title').text('Update Template');
    $('#alert_lvl').val(data.alert_lvl);
    $('#internal_alert').val(data.internal_alert);
    $('#scenario').val(data.possible_scenario);
    $('#response').val(data.remended_response);
    $('#submit_template').text("UPDATE");
    $('#template_modal').modal('toggle');
});

And this is my save function that will refresh the datatable to show the updated one.

function reloadTable() {
    $('#template_table').DataTable().clear();
    $('#template_table').DataTable().destroy();
    template_table = $('#template_table').DataTable( {
        "processing": true,
        "serverSide": false,
        "scrollX": true,
        "ajax": '../munications/fetchalltemplate',
        columns: [
            { "data" : "id" , title:"ID"},
            { "data" : "alert_lvl", title:"ALERT LEVEL"},
            { "data" : "internal_alert", title:"INTERNAL ALERT"},
            { "data" : "possible_scenario", title:"POSSIBLE SCENARIO"},
            { "data" : "remended_response", title:"RECOMMENDED RESPONSE"},
            { "data" : "last_update_by", title:"LATEST MODIFICATION"},
            { "data" : "functions", title: "*"}
        ]
    });
}

then if i hit update again. i throws the error right here in this part.

var data = templateTable.row(closestRow).data();

Thank you in advance if you can help me.

I was having a problem regarding Datatables, when i try to edit my data from the datatable it goes all well, after the datatable refreshes my edit / delete buttons does not work and it throws this kind of error Uncaught TypeError: Cannot read property '_aData' of undefined.

Here is my UI for the datatable. Datatable image here.

Here is my code for the event for the edit.

$('#template_table tbody').on('click','.update',function(){
    var closestRow = $(this).closest('tr');
    var data = templateTable.row(closestRow).data();
    console.log(data);
    tableId = data.id;
    $('#modal-title').text('Update Template');
    $('#alert_lvl').val(data.alert_lvl);
    $('#internal_alert').val(data.internal_alert);
    $('#scenario').val(data.possible_scenario);
    $('#response').val(data.remended_response);
    $('#submit_template').text("UPDATE");
    $('#template_modal').modal('toggle');
});

And this is my save function that will refresh the datatable to show the updated one.

function reloadTable() {
    $('#template_table').DataTable().clear();
    $('#template_table').DataTable().destroy();
    template_table = $('#template_table').DataTable( {
        "processing": true,
        "serverSide": false,
        "scrollX": true,
        "ajax": '../munications/fetchalltemplate',
        columns: [
            { "data" : "id" , title:"ID"},
            { "data" : "alert_lvl", title:"ALERT LEVEL"},
            { "data" : "internal_alert", title:"INTERNAL ALERT"},
            { "data" : "possible_scenario", title:"POSSIBLE SCENARIO"},
            { "data" : "remended_response", title:"RECOMMENDED RESPONSE"},
            { "data" : "last_update_by", title:"LATEST MODIFICATION"},
            { "data" : "functions", title: "*"}
        ]
    });
}

then if i hit update again. i throws the error right here in this part.

var data = templateTable.row(closestRow).data();

Thank you in advance if you can help me.

• javascript
• jquery
• datatable

2 Answers 2

I initialize the datatable every time i reload the datatable and it worked properly.

under reloadTable function.

var templateTable = $('#template_table').DataTable();

The problem in your code is in the declaration of closestRow variable.

According to jQuery docs, the .closest() function searches for the closest element (respecting the given selector) traversing the DOM upwards.

This means that since you're binding this action to the click on the table's body, you're basically searching for a <tr> element among the parents of that table.

You can do what you want with another selection method

var closestRow = $(this).children('tr:first');