Problem opening child with font-awesome icon

Problem opening child with font-awesome icon

gWatkinsgWatkins Posts: 11Questions: 5Answers: 0

I have a cell in my table that shows multiple font-awesome icons that when clicked will perform various functions related to the row that the icon is associated with. One of the functions is to open the child for that row (icon = iPlayer). The problem I am having is that I have to click the icon twice the first time before the child row will open. The first time it is clicked it shows a "Cannot read property 'show' of undefined" error. Also once it has been clicked on once then from that point on it works for all rows with a single click. It seems that something is not getting set until it is clicked the first time. Below is a snippet of my code for that column and the onclick function. Any help would be greatly appreciated.

{
        "data": "fileName",     
        "visible": true,
        "searchable": false,
        "orderable": false,
        "render": function (data, type, row) {
            return '<iPlayer class="fa fa-play" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to open/close player"></i>&nbsp;&nbsp;'+
                   '<iDelete class="fa fa-cross" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to delete this voicemail"></i>&nbsp;&nbsp;&nbsp;'+
                   '<iSave class="fa fa-floppy-disk" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to save this voicemail"></i>&nbsp;&nbsp;'+
                   '<iFwd class="fa fa-arrow-right" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to forward this voicemail"></i>&nbsp;'+
                   '<iDownload class="fa fa-file-download" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to download this voicemail"></i>&nbsp;&nbsp;'+
                   '<iEmail class="fa fa-mail" data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Click to email this voicemail"></i>&nbsp;&nbsp;';
            },
},
$('#tbl_vm_log tbody').on('click', 'td iPlayer', function () {
        action = "openPlayer";
        tr = $(this).parents('tr');
        row = vm_table.row( tr ); 
        rowIdx = vm_table.row($(this).parents('tr').first()).data().id;  
        tag = vm_table.cell( row , 5 ).data();              
        fileName = vm_table.cell( row , 1 ).data();       
        recordID = vm_table.cell( row, 0 ).data();  

        if ( row.child.isShown() ) {
            closePlayer();
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            checkAutoRefresh();
        }
        else
        {
            if ( vm_table.row( '.shown' ).length ) { 
                closePlayer();
                vm_table.row( '.shown' ).child.hide();
                oldtr = vm_table.row( '.shown' ).node();
                $(oldtr).removeClass('shown');
                checkAutoRefresh();               
            }
            // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');           
        }
    } );

This question has an accepted answers - jump to answer

Answers

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

    Can you confirm what format(row.data()) is returning the first time the click happens? It is it undefined then that would probably explain the issue.

    Allan

  • gWatkinsgWatkins Posts: 11Questions: 5Answers: 0

    Thanks for the reply Allan but I figured it out. There was a variable that defined the layout of the child row that was not getting set prior to opening the child.

This discussion has been closed.