Click function not working after DataTable re-draw.

quinhobooz

I have a function that when I click on a link with a class called .linkTabela a modal opens.
it works just fine, but after a load new DOM and Destroy and redraw the datatable the function returns undefined value.
I checked the DOM and both the class and attribute are there.

//Function to get attr rel when clicking on a link with class .linkTabela
var handleLinkUpdate = function() {
  $('#kt_inbox_listing').on('click', '.linkTarefa', function (e) {
    e.preventDefault();
    var codTarefa = datatable.row($(this).parents('tr')).nodes().to$();
    codTarefa = codTarefa.attr('rel');
    alert(codTarefa);
     ...
  });   
}

//Function to InitDatatable
// Private functions
    var initDatatable = function () {
        // Init datatable --- more info on datatables: https://datatables.net/manual/
        datatable = $(table).DataTable({
            "info": false,
            'order': [],
            // 'paging': false,
            'pageLength': 7,     
            "lengthMenu": [ 7, 15, 30 ],
            "drawCallback": function( settings ) {
                handleLinkUpdate();
            }
        });

        datatable.on('draw', function () {
            handleDatatableFooter();
            setTodoDone(); 
        });
    }

//Function to redraw datatable
// Handle datatable update event
    var handleUpdateDatatable = () => {
        var reloadButton = $('#reloadDatatable');
        reloadButton.toggleClass('btn-active-light-primary');
        reloadButton.click(function(){
            blockUI.block();
            **$('#kt_inbox_listing').DataTable().destroy();**
            if($('#cacheUrlDatatable').val() == ''){
                $("#divTabela").load("assets/ajax/json/apps/processos/tarefas/load_tarefas.php?codigo="+codProcesso, function(){
                    table = document.querySelector('#kt_inbox_listing');
                    if (!table) {
                        return;
                    }
                    initDatatable();  
                    handleDatatableFooter();  
                    updateBadgesAtrasadas(); 
                    updateBadgesHoje(); 
                    blockUI.release();
                });
            } else {
                $("#divTabela").load($('#cacheUrlDatatable').val(), function(){
                    
                    table = document.querySelector('#kt_inbox_listing');
                    if (!table) {
                        return;
                    }
                    initDatatable();  
                    handleDatatableFooter();   
                    updateBadgesAtrasadas(); 
                    updateBadgesHoje();
                    blockUI.release();
                });
            }
        });
    }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

handleLinkUpdate adds a delegated event handler to the #kt_inbox_listin element (the table?). That needs to be done only once, otherwise you are just adding more and more event handlers.

You could just call that function once after the DataTable has initialised.

Allan

quinhobooz

Hi Allan, but I´m in fact calling the handleLinkUpdate() once, on the

"drawCallback": function( settings ) {
handleLinkUpdate();
}

It works just fine once the page is loaded, but after destroy and new datatable draw it returns UNDEFINED.

kthorngren

The drawCallback funciton is called every time the table is drawn. Move the function call outside of Datatables or place it in the initComplete function.

Kevin

quinhobooz

Hi Kevin,

datatable = $(table).DataTable({
"info": false,
'order': [],
// 'paging': false,
'pageLength': 7,
"lengthMenu": [ 7, 15, 30 ],
"initComplete": function(settings, json) {
handleLinkUpdate();
}
});

I did it and still returns with UNDEFINED.
If i put it outsite dhe datatable() (inside the initDatabase) also return with UNDEFINED.

Losing my mind here! lol

kthorngren

Looks like a Javascript scoping issue. You defined the variable datatable in the function initDatatable which means its not accessible outside the function like in the handleLinkUpdate function.

One option is to get an instance of the API in the handleLinkUpdate function, for example:

var datatable = $('#kt_inbox_listing').Datatable();
var codTarefa = datatable.row($(this).parents('tr')).nodes().to$();

If this doesn't help then use the browser's debugger with a breakpoint in the handleLinkUpdate function to determine what exactly is undefined.

Kevin

quinhobooz

Doing that I get a error message:

Uncaught TypeError: $(...).Datatable is not a function

But the way I did, once the page is loaded (with the dom) it works.. so it is accessing the datatable object.

quinhobooz

Used .DataTable and the error message is gone.. but the problem remais..

quinhobooz

using the debugger, the UNDEFINED value comes from:

var codTarefa = datatable.row($(this).parents('td')).nodes().to$();

kthorngren

but the problem remais..

So you are still getting the undefined error?

Did you do some debugging to determine what is undefined?

At this point we will need to see the problem to help debug. Its difficult to debug code snippets. Please 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

Kevin

quinhobooz

Kevin, I worked around it!

I was getting the attr('rel') from the datatable.row()data function.
After re-draw, I can get from attr from the dom click directly. see if you can get it.

$('#kt_inbox_listing').on('click', '.linkTarefa', function (e) {
e.preventDefault();
var codTarefa = datatable.row($(this).parents('tr')).nodes().to$();
codTarefa = codTarefa.attr('rel');

        $("#acao_tarefa").val('Atualizar');
        $('#tituloModalTarefa').text('Atualizar Tarefa');
        if(codTarefa == undefined){
            codTarefa = $(this).attr('rel');
        }

This way when the page is freshly loaded it gets from the row() data.. after reload it does works getting from the .linkTarefa click function.