Error to show details

Error to show details

sebaspmisebaspmi Posts: 3Questions: 1Answers: 0

Hello!!

I'm create a Datatable with RowDetails

Radomly I recive this error:

Uncaught TypeError: Cannot read property '_detailsShow' of undefined
at u.<anonymous> (datatables.min.js:132)
at Function.isShown (datatables.min.js:114)
at HTMLTableCellElement.<anonymous> (monitoralertas.aspx:335)
at HTMLTableElement.dispatch (jquery-1.10.2.min.js:5)
at HTMLTableElement.v.handle (jquery-1.10.2.min.js:5)

This error appears when I click the button (+) on my Grid

Steps:
1) I have a filter section, when I push the button Search this button call to the function Buscar(). I use the filter section to launch the ajax Rq with parameters

..
function Buscar() {
document.getElementById("Datos").style.display = ""; //Poner el stulo del DIV
$('#KPIAlertas').DataTable().clear()
$('#KPIAlertas').DataTable().destroy()
$.fn.dataTable.moment('DD/MM/YYYY H:mm:ss');
var table = $('#KPIAlertas').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'print'
],
"ajax":
{
"url": "./ajax/alertas.ashx",
"type": 'POST',
"data": { "op": "GetAlertas", "a_codi": ObtenerFiltroCliente()}
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Cliente" },
{ "data": "Alerta" },
{ "data": "Fecha" },
{ "data": "ValorTotal", "width": "10", "className": "dt-body-center" },
{ "data": "ValorRegistrado", "width": "10", "className": "dt-body-center" },
{ "data": "Valor", "width": "10", "className": "dt-body-center" },
{ "data": "ActualKPI", "width": "10", "className": "dt-body-center" },
{
"data": function (data, type, row, meta) { if (data.FechaRevisada == "") return false; else return true; }, "width": "10", "className": "dt-body-center",
"render": function (data, type, row, meta) {
if (row.FechaRevisada == "") {
return "<img id=IRes_" + row.id_ale + " src='./img/PRevisada.png' onclick='VerificarAlerta(" + row.id_ale + ",1)' />";
}
else {
return "<img id=IRes_" + row.id_ale + " Title='" + row.FechaRevisada + "'src='./img/Revisada.png' onclick='VerificarAlerta(" + row.id_ale + ",0)'/>"
}
}
}
],
"order": [[1, 'asc']],
"pageLength": 25,
"language": {
"url": "./lang/datatable.json",
buttons: {
copy: 'Copiar',
copyTitle: 'Copiado al portapapeles',
copySuccess: {
_: '%d lineas copiadas',
1: '1 línea copiada'
},
print: 'Imprimir'
}
}
});
// Add event listener for opening and closing details
$('#KPIAlertas').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
//var childrenHtml = ObtenerHTML(row.data());
ObtenerHTML(row.child, row.data())
// row.child(childrenHtml).show();
tr.addClass('shown');
}
});

    }   

...

Can you help me?

Answers

  • rgantlargantla Posts: 4Questions: 0Answers: 0

    I'm facing the same problem. sometimes it works and some times it doesnt.. I am using Javascript sourced data which is a little bit different from your case. Help would be greatly appreciated!

  • sebaspmisebaspmi Posts: 3Questions: 1Answers: 0
    edited February 2017

    Hello

    The solution i find and works fine is put the listener on DocumentReady.

  • rgantlargantla Posts: 4Questions: 0Answers: 0

    Do you have a working js fiddle demo? Would be helpful.

  • sebaspmisebaspmi Posts: 3Questions: 1Answers: 0

    Hello

    Impossible, I use this grid in my intranet website.

    Best regards

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    To anyone having this issue - can you create a test case showing the issue using http://live.datatables.net or JSFiddle please.

    Allan

  • rgantlargantla Posts: 4Questions: 0Answers: 0

    Hi Allan,

    Hope you're doing great!

    Please find the JSfiddle here: https://jsfiddle.net/rgantla/swjr5oeo/3/
    This is a little bit different from my office file where i actually have a problem

    I am able to create the child rows show/hide in the fiddle successfully but when I try the same with my office file this error is popping up as shown in the figure (screen cap of my console)

    Uncaught TypeError: Cannot read property '_detailsShow' of undefined
        at u.<anonymous> (jquery.dataTables.min.js:120)
        at Function.isShown (jquery.dataTables.min.js:102)
        at HTMLTableCellElement.<anonymous> (bonkers.html:617)
        at HTMLTableSectionElement.dispatch (jquery-1.12.4.js:5226)
        at HTMLTableSectionElement.elemData.handle (jquery-1.12.4.js:4878)
    

    However, the office code I am working with is as follows: Please note that my office script has javascript sourced data (taskData) that I fetched through an ajax call outside of this datatable creation

    function tableCreate(){
        var dataTableInstance = $('#taskInfoTable').DataTable( {
            "columnDefs": [
                { className: "details-control", "targets": [ 0 ] }
                            ],
                "data": taskData,
                "columns": [
                { title: "TASK"},
                { title: "URL" },
                { title: "SERVERNAME", "visible": false },
                { title: "INSTANCENAME" },
                { title: "CLIENTNAME" },
                { title: "LASTFIRE" },
                { title: "NEXTFIRE", "visible": false  },
                { title: "CRONTIME", "visible": false  },
                { title: "START_TIME", "visible": false  },
                { title: "START_DATE", "visible": false  },
                { title: "STATUS" },
                { title: "REPEAT", "visible": false  },
                { title: "FILENAME" },
                { title: "DIM_titleSET" },
                { title: "DIM_ACTION_ID" },
                { title: "DIM_ACTION_NAME" },
                    { title: "DIM_ACTION_TYPE", "visible": false  },
                { title: "DIM_ACTIONLOG_ID" },
                { title: "DIM_ACTIONLOG_TIMEBEGIN" },
                { title: "DIM_ACTIONLOG_TIMEEND" },
                { title: "DIM_ACTIONLOG_NUMRECORDS" },
                { title: "DIM_ACTIONLOG_LASTUPDATE" },
                { title: "TASK_STATUS"},
                ],
                "destroy": true,
                "rowCallback": function (row, data, index){
                         var cfTimeBegin = Date.parse(data[5]);
                         var dimTimeBegin = Date.parse(data[18]);
                         var diffTimeBegin = Math.abs(cfTimeBegin-dimTimeBegin);
                                        
        if((isNaN(dimTimeBegin)) || (isNaN(cfTimeBegin)) || (diffTimeBegin > 7200000)){
                 $(row).css({"background-color":"rgba(255,0,0,0.2)"});
        }
        else if(diffTimeBegin >= 0 && diffTimeBegin < 900001){
            $(row).css({"background-color":"rgba(0,255,0,0.2)"});
        }
            else if(900000 < diffTimeBegin < 7200001){
            $(row).css({"background-color":"rgba(255,255,0,0.2)"});
        }
        else{
               alert("task misbehavior - doesnot fall into fail/warning/success categories")
        }
        
    } //end of rowCallback function
    } ); // dataTable instance creation ends here
    
                            
        $(".showHideColumn").on('click', function(){
        var tableColumn = dataTableInstance.column($(this).attr("data-columnindex"));
                                    
        tableColumn.visible(!tableColumn.visible());
            }); // this function is to hide/show toggle for the unimportant columns
                                
                            
    function format (data) {
         return '<table cellpadding="5" cellspacing="0" border="0">'+
         '<tr>'+
            '<td><b> URL: </b></td>'+
              '<td>'+ data[1] +'</td>'+
         '</tr>'+
         '<tr>'+
            '<td><b> Client Name: </b></td>'+
             '<td>'+ data[4] +'</td>'+
             '</tr>'
             '</table>'
            }
                                
    $('#taskInfoTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dataTableInstance.row( tr );
    
        if ( row.child.isShown() ) {
            // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                                    
        }
        else {
            // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                                    
        }
         } );
                        
        } // function tableCreate() ends here
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Just to confirm, the JSFiddle you linked to does not reproduce the issue? I'm afraid I'd really need to be able to see the error to be able to debug it and understand what is triggering it.

    Allan

  • rgantlargantla Posts: 4Questions: 0Answers: 0

    Hi allan,

    Thanks for your response. The code I am talking about is secure and I'm afraid I cannot share it here. I have created the JS fiddle now with my office data, which reproduces the error exactly. is there any other way like an email id for us to connect so that I can send the JSfiddle link over to you?

    if you feel uncomfortable sharing your email id here, this is my email id: raja.gantla@gmail.com - please ping me on this and we can connect.

    I really appreciate your effort. Thanks!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    You can send me a PM by clicking my name above and then "send message".

    Allan

  • pieper04pieper04 Posts: 5Questions: 0Answers: 0

    What is the solution?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I can't remember! Can't you link to a test case showing the issue please.

  • pieper04pieper04 Posts: 5Questions: 0Answers: 0

    I have a table that is being loaded with data via ajax. When the data of the table changes, I give a destroy in the table and create it again, but from the third row happens the error:

    jquery.dataTables.min.js:121 Uncaught TypeError: Cannot read property '_detailsShow' of undefined
        at t.<anonymous> (jquery.dataTables.min.js:121)
        at Function.isShown (jquery.dataTables.min.js:103)
        at HTMLTableCellElement.<anonymous> (panel.js:422)
        at HTMLTableSectionElement.dispatch (jquery.min.js:3)
        at HTMLTableSectionElement.r.handle (jquery.min.js:3)
    
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    If you link to a test page showing the issue I'll try to make some time to look into it.

    Allan

  • pieper04pieper04 Posts: 5Questions: 0Answers: 0

    Okay, but I would not know more or less what might cause this error?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    If you link to the page I will be able to debug it and then explain what is going wrong. At the moment I honestly don't have a clue what is going wrong.

    Allan

  • pieper04pieper04 Posts: 5Questions: 0Answers: 0
    function fichaFisica(url, token){
      parametros = "fichaFisica/"+document.fFisica.safra.value+"/"+document.fFisica.produto.value+"/"+document.fFisica.variedade.value+"/"+document.fFisica.tipo.value;
        
        $.ajax({
          type: "GET",
          crossDomain: true,
          url: url+parametros,
          headers: {
          "authorization": "Basic "+token,
          "cache-control": "no-cache"
        },
        xhrFields: {
          "withCredentials": false
        },
        success: function(response){
          var response = $.parseJSON(response);
          var response = response.result;
          var length = response[0].length;
          response = response[0];
    
          if (length > 0) {
            function format ( d ) {
              return '<table cellspacing = 2  class="table table-hover" style="margin:0px;">'+
                  '<tr>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>DEP&Oacute;SITOS</b></div><div class="cTle"><b> '+d.DISPONIVEL+'</b><p> '+d.DISPONIVEL_SC+' </div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>DEVOLU&Ccedil;&Otilde;ES</b></div><div class="cTle"><b> '+d.DEVOLUCAO+'</b><p> '+d.DEVOLUCAO_SC+' </div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>F&Iacute;SICO</b></div><div class="cTle"><b> '+d.FISICO+'</b><p>'+d.FISICO_SC+'</div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>C/TRANSF</b></div><div class="cTle"><b> '+d.TRANS_C+'</b><p> '+d.TRANS_C_SC+'</div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>D/TRANSF</b></div><div class="cTle"><b> '+d.TRANS_D+' </b><p> '+d.TRANS_D_SC+'</div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>LOTES/CESS&Atilde;O</b></div><div class="cTle"><b> '+d.LTCESSAO+'</b><p> '+d.LTCESSAO_SC+'</div></td>'+
                      '<td class="col-md-2 col-lg-2 col-sm-5 col-xs-5 doze" id="rdet"><div class="cCab"><b>SALDO</b></div><div class="cTle"><b> '+d.SALDO+'</b><p> '+d.SALDO_SC+'</div></td>'+
                  '</tr>'+
              '</table>';
            }
              
              var table = $('#testeData').DataTable({
                  data: response,
                  columns: [
                    { data: "INDICE", "className":'INV'},
                    { data: "COD_PROP", "className":'INV'},
                    { data: "NOMERAZAO", "className":'tdNome'},
                    { data: "CNPJ_CPF", "orderable": false , "className": 'tdCNPJ'},
                    { data: "PROPRIEDADE", "orderable": false , "className":'tdAuto'},
                    { data: "IE", "orderable": false , "className":'tdAuto'},
                    { "className":'saldo', data: "SALDO", "orderable": false },
                    {
                      "className":'tdGraf',
                      "orderable":false,
                      "data": null,
                      "defaultContent":'<div class="dTotal"></div>'
                    },
                    {
                      "className":'details-control',
                      "orderable":false,
                      "data":null,
                      "defaultContent": ''
                    },
                  ],
                  "order": []
               });
    
                  $('#testeData tbody').ready(function() { 
                    $('#testeData tbody').on('click', 'td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row( tr );
                 
                        if ( row.child.isShown() ) {
                          row.child.hide();
                          tr.removeClass('shown');
                        }
                        else {
                          row.child( format(row.data()) ).show();
                          tr.addClass('shown');
                        }
                    });
                });
              }
            }
        });
    }
    

    This is the code that feeds the dataTable, when I change the data table data I execute this code:

    function destroy(){
      $('#testeData').DataTable().destroy();  
      $('#tbFicha').html('');
    }
    

    And there occurs the error:

    jquery.dataTables.min.js:121 Uncaught TypeError: Cannot read property '_detailsShow' of undefined
        at t.<anonymous> (jquery.dataTables.min.js:121)
        at Function.isShown (jquery.dataTables.min.js:103)
        at HTMLTableCellElement.<anonymous> (fichaFisica.js:389)
        at HTMLTableSectionElement.dispatch (jquery.min.js:3)
        at HTMLTableSectionElement.r.handle (jquery.min.js:3)
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Perhaps your event handle is still being run somehow? Without a test case, which I've already asked for multiple times, I can't say for sure. I'm afraid I won't be replying again without a test case.

    Allan

  • Aimee_liuAimee_liu Posts: 1Questions: 0Answers: 0
    edited July 2017

    Hi , I have this problem those days, and i have resolve it use the answer given by sebaspmi. Code is below:

    var table;
    var queryTableData = function(e){
    //init the table
       table = $('#monkeyTable').DataTable({
                    "bAutoWidth": false,
                     "data": dataObj,
                     "columns": columns,
                    "bLengthChange":false,
                    "bSort":true,
                    "iDisplayLength":15,
                    "bProcessing": true,
                    "oLanguage": {
                        "sUrl": "/public/font/ZH.json"
                    },
                    "order": [[ 8, "desc" ]],
                    "destroy":true
                });
            
            },
    }
    
    $(document).ready(function () {
        queryTableData ();
        // Add event listener for opening and closing details in $(document).ready
        $('#monkeyTable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var sn =  $(this).data("sn");
            var sum = $(this).data("sum");
            var originalSN = $(this).data("originalsn");
            var row = table.row( tr );
            if ( row.child.isShown()){
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                appendSNToDataTable(row,sn, sum, originalSN);
            }
        } );
    });
    

    Hope my answer will help.

  • fmcgeoughfmcgeough Posts: 3Questions: 1Answers: 0

    you should remove your click handler when you destroy the datatable. Your table won't be the same if you rebuild it for new AJAX request.

  • AlviiAlvii Posts: 15Questions: 4Answers: 2

    For anyone still having this problem, the solution that worked for me was to set the click event off before setting it on. For example, if my click event is:

    // Add event listener for opening and closing details for Total general
                $('#gridReporte tbody').on('click', '.TotalGeneral', function () {
                    //Code
                });
    
    

    I just needed to add:

    $('#gridReporte tbody').off('click', '.TotalGeneral');
    
    

    The working code being:

    // Add event listener for opening and closing details for Total general
                $('#gridReporte tbody').off('click', '.TotalGeneral');
                $('#gridReporte tbody').on('click', '.TotalGeneral', function () {
                    //Code
                });
    
    

    I hope it helps

This discussion has been closed.