Click function not working after DataTable re-draw.

Click function not working after DataTable re-draw.

quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0
edited November 2022 in Free community support

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.

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited November 2022

    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

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

    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.

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

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

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

    using the debugger, the UNDEFINED value comes from:

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • quinhoboozquinhobooz Posts: 12Questions: 3Answers: 0

    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.

Sign In or Register to comment.