Error to show details

sebaspmi

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?

rgantla

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!

sebaspmi

Hello

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

rgantla

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

sebaspmi

Hello

Impossible, I use this grid in my intranet website.

Best regards

allan

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

Allan

rgantla

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

allan

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

rgantla

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!

allan

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

Allan

pieper04

What is the solution?

allan

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

pieper04

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)


allan

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

Allan

pieper04

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

allan

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

pieper04

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)

allan

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_liu

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.

fmcgeough

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.

Alvii

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