display filename in the editor form

Andreas S.

I have a problem with the upload and display of the filename in the upload form, if a file already exists.
There are two tables in the database. One where the data of the files that have already been uploaded are stored. And a second table where the file id is stored, if a file for this entry exists. If not the cell has 0 as entry. It looks like of your upload example.
I'm not sure if everything is sent correctly to the editor.
For the datatable , the server sends following json to the client.

{
    "draw": 1,
    "recordsTotal": 13,
    "recordsFiltered": 13,
    "data": [
        {
            "_index": "1",
            "DT_RowId": 3,
            "bdate": "2018-09-09",
            "edate": "2018-09-09",
            "event_name": "Test Event 2018",
            "city": "Rif",
            "file": {
         "id": 3,
                "name": "test.xlsx”
  }
        },{
            "_index": "2",
            "DT_RowId": 5,
            "bdate": "2018-09-09",
            "edate": "2018-09-09",
            "event_name": "Test Event 2017",
            "city": "Wien",
            "file": {}
        },       
        ...
    ]
}

here my editor part:

eEdit = new $.fn.dataTable.Editor( {
        ajax: 'assets/php/pa-server-process.php?a=4',
        table: '#eventtable',
        display: 'bootstrap',
        idSrc: 'DT_RowId',
        template: '#customFormEvents',
        fields: [
            {
                label: 'Event name:',
                name: 'event_name'
            },.....{
                label: 'Ranking (xlsx):',
                name: 'file',
                data: 'file.id',
                type: 'upload',
                dragDrop: true,
                clearText: 'Remove file',
                display: function( id ) {
                    console.log( eEdit.file( 'paevent', id ).name );
                    //console.log( eEdit.file( 'paevent', fileId ).fileName );
                    //return eEdit.file( 'paevent', fileId ).fileName;
                }
            }
        ]
    } );

var paevent = $( '#eventtable' ).DataTable( {
        ajax: {
            url: 'assets/php/pa-server-process.php?a=3',
            type: 'POST'
        },
        autoWidth: false,
        select: true,
        serverSide: true,
        processing: true,
        ordering: false,
...

Andreas

allan

I don't see how you are defining the columns for your DataTable, but I would suggest that you probably want to do:

{
  data: 'file.name',
  defaultContent: ''
}

Allan

Andreas S.

I get always this error: Unknown file table name: paevent. I did not known why

Andreas

My datatable code is this:

    var paevent = $( '#eventtable' ).DataTable( {
        ajax: {
            url: 'assets/php/pa-server-process.php?a=3',
            type: 'POST'
        },
        autoWidth: false,
        select: true,
        serverSide: true,
        processing: true,
        ordering: false,
        pagingType: 'numbers',
        dom: "<'row'<'col-sm-4 DT_Buttons_Style'B><'col-sm-4'><'col-sm-4'>>rt<'row'<'col-sm-6'i><'col-sm-6'p>>",
        columnDefs: [
            { targets: 0, visible: true, className: 'text-right' },
            { targets: 1, visible: true, className: 'text-center' },
            { targets: 2, visible: true, className: 'text-center' },
            { targets: 3, visible: true, className: 'text-left' },
            { targets: 4, visible: true, className: 'text-left' },
            { targets: 5, visible: true, className: 'text-center' },
            { targets: 6, visible: true, className: 'text-center' },
            { targets: 7, visible: true, className: 'text-center' },
            { targets: 8, visible: true, className: 'text-center' },
            { targets: '_all', visible: false, searchable: false, orderable: false }
        ],
        columns: [
            {
                data: '_index', width: '3%'
            },{
                data: 'bdate', width: '10%'
            },{
                data: 'edate', width: '10%'
            },{
                data: 'event_name'
            },{
                data: 'city'
            },{
                data: 'cup', width: '4%', render: function( data ) {
                    return ( 'Y' == data ) ? '<i class="far fa-check-circle text-green"></i>' : '';
                }
            },{
                data: 'cup_round', width: '4%'
            },{
                data: 'results', width: '4%', render: function( data ) {
                    return ( 'N' == data ) ? '<i class="far fa-times-circle text-red"></i>' : '<i class="far fa-check-circle text-green"></i>';
                }
            },{
                data: 'updated', width: '16%'
            },{
                data: 'file.name',
                defaultContent: ''
            }
        ],
        buttons: [
            {
                extend: 'create',
                editor: eEdit,
                text: '<i class="far fa-plus-hexagon"></i>',
                className: 'text-green bold createNoFocus',
                titleAttr: 'Add new event',
                action: function( e, dt, button, config ) {
                    $( '.createNoFocus' ).click(
                        eEdit.create( 
                            {
                                focus: null,
                                title: '<i class="far fa-plus-octagon text-green bold"></i> Add new Event',
                                buttons: [
                                    'Add',
                                    { text: 'Cancel', action: function() { this.close(); } }
                                ]
                            }
                        )
                    )
                }
            },{
                extend: 'edit',
                editor: eEdit,
                text: '<i class="far fa-pencil"></i>',
                titleAttr: 'Edit Event',
                className: 'text-blue bold editNoFocus',
                action: function( e, dt, button, config ) {
                    $( '.editNoFocus' ).click(
                        eEdit.edit(
                            dt.rows( { selected: true } ),
                            {
                                focus: null,
                                title: '<i class="far fa-pencil text-blue bold"></i> Edit Event',
                                buttons: [
                                    'Edit',
                                    { text: 'Cancel', action: function() { this.close(); } }
                                ]
                            }
                        )
                    )
                }
            },{
                extend: 'remove',
                editor: eEdit,
                text: '<i class="fas fa-trash"></i>',
                titleAttr: 'Delete Event',
                className: 'text-red bold',
                action: function( e, dt, button, config ) {
                    $( '.editNoFocus' ).click(
                        eEdit.remove(
                            dt.rows( { selected: true } ),
                            {
                                title: '<i class="fas fa-trash text-red bold"></i> Delete Event',
                                buttons: [
                                    'Remove',
                                    { text: 'Cancel', action: function() { this.close(); } }
                                ]
                            }
                        )
                    )
                }
            },{
                extend: 'edit',
                editor: iEdit,
                text: '<i class="fas fa-file-import"></i>',
                titleAttr: 'Import selected Result',
                className: 'text-maroon bold',
                action: function( e, dt, button, config ) {
                    iEdit.edit(
                        dt.rows( { selected: true } ),{
                            title: '<i class="fas fa-file-import text-maroon bold"></i> Import selected Result',
                            buttons: [
                                'Import',
                                { text: 'Cancel', action: function() { this.close(); } }
                            ]
                        }
                    )
                }
            }
        ],
        initComplete: function( data ) {
            $( '#eventtable' ).removeClass( 'd-none' );
        }
    } );
    
    eEdit.on( 'postCreate postEdit postRemove uploadXhrSuccess', function( e, json, data ) {
        if( 'uploadXhrSuccess' == e.type ) {
            this.submit( null, null, function( e ) {
                //var ttt = eEdit.field( 'fileId' ).val( file.upload.id );
                var i = Object.keys( e.data );
                e.data[i].fileId = data.upload.id;
            } );
        } else {
            paevent.ajax.reload( null, false );
        }
    } );

allan

That's an error coming from the server-side. Can you show me that code please? A link to the page showing the issue would also be useful.

Allan

Andreas S.

send you an pm with the testlink

Andreas

allan

Thank you for the link, however you'll need to give me steps on how to recreate the error I'm afraid. I had assumed that it was when you were loading the page, but the table appears to load without issue. I've also tried uploading an xlsx file and that appears to work without issue as well.

Allan

Andreas S.

I use the MS edge, but I see this error in the other browsers too. select the row 3 an click on the edit button. in the console you see the error. if you select the other rows the console shows an other error. see screenshot: if you select the row 1 or two the first time, there are no error in the console.log. if you click a second time on the edit button the error comes. I think, there something wrong to show the filename in the form
Andreas