datatable1.7.1 editor 2.0.4 upload generation

pascal81 · July 2021

Link to test case: no link
Error messages shown: no error be throw
Description of problem: on Upload: upload file in good place, add information in
document table but no add id primary key of document in Facturation!!
BDD:

document
id int(8) Non auto_increment
nom varchar(50) Non
WebPath varchar(100
)
Non
extension varchar(8) Non

facturation
id int(11) Non auto_increment
intitule varchar(50) Non
montant float Non
date_fact timestamp Non CURRENT_TI
MESTAMP
DEFAULT_GENE
RATED
document int(8) Oui NULL -> document.id
ON UPDATE RESTRICT
ON DELETE CASCADE
id_tache int(6) Non -> tache.id
ON UPDATE CASCADE
ON DELETE RESTRICT
id_ent int(4) Non

PHP repository:

$e=Editor::inst(self::$db,self::$table );
            $e->fields(
                Field::inst('facturation.document')->setFormatter( Format::ifEmpty( null ) )
                    ->upload(
                        Upload::inst( './uploads/__ID__.__EXTN__' )
                            ->db( 'document', 'id', array(
                                'nom' => Upload::DB_FILE_NAME,
                                'webPath' => Upload::DB_SYSTEM_PATH,
                                'extension'=> Upload::DB_EXTN
                            ))
                    )
            );
            $e->process($_POST)
            ->json();

js for generation:

let pda={appel:repo};
    let pdax={url:appel,type:"POST",data:pda};

     $.post(pdax.url,pda).done(function(data, st) {

        let  attr=".datatable",clmns=[],field=[];
        let donne=JSON.parse(data);
        let dt=donne.data[0];

        //addcolonne de check
        clmns.push({title:sstitre,className:'details-control',orderable:false,"data": null,"defaultContent":''});

         buildParam(dt,field,clmns);

        editor = new $.fn.dataTable.Editor( {
            ajax:{url:appel,
                type:"POST",
                data:function (d) {
                    d.appel = repo;
                }},
            table:attr,
            fields: field
        } );
        $.fn.dataTable.ext.errMode = 'none';
        table =$(attr).on( 'error.dt', function ( e, settings, techNote, message ) {
            console.log( 'An error has been reported by DataTables: ', message );
        } ).DataTable( {
            dom: 'B<"toolbar">rtip',//f pour searchbox
            ajax:pdax,
            processing: true,
            serverSide: true,
            order: [[ 1, 'asc' ]],
            columns: clmns,
            columnDefs : clmd,
            responsive:true,
            retrieve: true,
            select: true,
            buttons:bt
        } ).on( 'click', 'tbody td:not(:first-child)', function (e) {
                               editor.inline( this );
        } ).on('click', 'tbody td.details-control', function (e) {

            e.stopImmediatePropagation();
            let tr = $(this).closest('tr');

            let row = table.row( tr ),
             idx=table.row( this ).index();

            let id=table.cell( idx,1).data();

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide(),tr.removeClass('shown');
                $("#DataTables_Table_"+id+"_wrapper").removeClass('bcg');
            }
            else{
                // Open this row

                row.child("<table class='sstable'></table>").show();
                createTable(id),tr.addClass('shown');
                $('.sstable').parent().css("background-color", "#0086bd");
            }
            tr=null;
        } )
        cTb();
    });

    buildParam=(dt,field,clmns)=>{
        $.each(dt,function(k,v){
            // console.log(k);
            if(typeof v==='object'){
                $.each(v,function(sk,sv){
                    if(sk==='document'){
                        field.push({
                            label:sk,
                            name:k+"."+sk,
                            type: "upload",
                        //     display:  ( id )=> {console.log(id);
                        //     return '<img src="'+editor.file( 'document', id ).webPath+'"/>';
                        // },
                        //     noImageText: 'No image'
                        }),
                            clmns.push({title:sk,data:k+"."+sk,/*render: function ( data ) {
                                    return data ?
                                        '<img src="'+editor.file( 'document', data ).webPath+'" />' :
                                        'No image';
                                }*/});
                    }else if(!/id[_]|[_]id|password/.test(sk)){
                        field.push({label:sk,name:k+"."+sk}),
                            clmns.push({title:sk,data:k+"."+sk});
                    }
                });
            }else if(!k.includes('DT_RowId')){
                field.push({label:k,name:k}),
                    clmns.push({title:k,data:k});
            }

        });
    }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · July 2021

Can you use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is.

Thanks,
Allan

pascal81 · July 2021

i place debugger in js & have this
https://debug.datatables.net/ibozaq

& i add
editor.on( 'uploadXhrSuccess', function ( e, json, data ) {
console.log( e);console.log( json);console.log(data);
} );
& get this

S.Event {type: "uploadXhrSuccess", timeStamp: 1627534943107, jQuery35009936382601232892: true, isTrigger: 2, namespace: "", …}
altKey: (...)
bubbles: (...)
button: (...)
buttons: (...)
cancelable: (...)
changedTouches: (...)
char: (...)
charCode: (...)
clientX: (...)
clientY: (...)
code: (...)
ctrlKey: (...)
currentTarget: a {add: ƒ, ajax: ƒ, background: ƒ, blur: ƒ, bubble: ƒ, …}
data: undefined
delegateTarget: a {add: ƒ, ajax: ƒ, background: ƒ, blur: ƒ, bubble: ƒ, …}
detail: (...)
eventPhase: (...)
handleObj: {type: "uploadXhrSuccess", origType: "uploadXhrSuccess", data: undefined, guid: 206, handler: ƒ, …}
isTrigger: 2
jQuery35009936382601232892: true
key: (...)
keyCode: (...)
metaKey: (...)
namespace: ""
offsetX: (...)
offsetY: (...)
pageX: (...)
pageY: (...)
pointerId: (...)
pointerType: (...)
result: undefined
rnamespace: null
screenX: (...)
screenY: (...)
shiftKey: (...)
target: a {add: ƒ, ajax: ƒ, background: ƒ, blur: ƒ, bubble: ƒ, …}
targetTouches: (...)
timeStamp: 1627534943107
toElement: (...)
touches: (...)
type: "uploadXhrSuccess"
view: (...)
which: (...)
proto: Object
generateTable.js:163 facturation.document
generateTable.js:163
{data: Array(0), files: {…}, upload: {…}}
data: []
files: {document: {…}}
upload: {id: "27"}
proto: Object

& in network i have this
the first:
data: [{DT_RowId: "row_6",…}, {DT_RowId: "row_7",…}, {DT_RowId: "row_8",…}, {DT_RowId: "row_9",…},…]
0: {DT_RowId: "row_6",…}
1: {DT_RowId: "row_7",…}
2: {DT_RowId: "row_8",…}
3: {DT_RowId: "row_9",…}
4: {DT_RowId: "row_10",…}
5: {DT_RowId: "row_11",…}
6: {DT_RowId: "row_12",…}
7: {DT_RowId: "row_13",…}
8: {DT_RowId: "row_14",…}
9: {DT_RowId: "row_15",…}
10: {DT_RowId: "row_16",…}
11: {DT_RowId: "row_17",…}
12: {DT_RowId: "row_18",…}
13: {DT_RowId: "row_19",…}
14: {DT_RowId: "row_20",…}
files: {document: {20: {id: "20", nom: "dlText.txt", webPath: "./uploads/20.txt", extension: "txt"}}}
document: {20: {id: "20", nom: "dlText.txt", webPath: "./uploads/20.txt", extension: "txt"}}
options: []

the draw
data: [{DT_RowId: "row_6",…}, {DT_RowId: "row_7",…}, {DT_RowId: "row_8",…}, {DT_RowId: "row_9",…},…]
0: {DT_RowId: "row_6",…}
DT_RowId: "row_6"
Facturation: {id: "6", intitule: "Facture", montant: "1200", date_fact: "2021-06-11 09:58:57", document: "20",…}
1: {DT_RowId: "row_7",…}
2: {DT_RowId: "row_8",…}
3: {DT_RowId: "row_9",…}
4: {DT_RowId: "row_10",…}
5: {DT_RowId: "row_11",…}
6: {DT_RowId: "row_12",…}
7: {DT_RowId: "row_13",…}
8: {DT_RowId: "row_14",…}
9: {DT_RowId: "row_15",…}
draw: 1
files: {document: {20: {id: "20", nom: "dlText.txt", webPath: "./uploads/20.txt", extension: "txt"}}}
options: []
recordsFiltered: "15"
recordsTotal: "15"

but in final
{data: [], files: {,…}, upload: {id: "30"}}
data: []
files: {,…}
document: {30: {id: "30", nom: "banniereSignature.png", webPath: "./uploads/30.png", extension: "png"}}
upload: {id: "30"}
id: "30"

i try to add ->debug(true) in php
when it's upload but??

allan · July 2021

I think I'm going to need a link to your page so I can debug this please. You can send it to me by private message by clicking my forum user name above and then the "Send message" button.

Everything you have there looks like it should be working properly - I'm not sure why it wouldn't be yet.

Thanks,
Allan

pascal81 · July 2021

tomorow, i put him online
& give you access code.
i have another question too,
i wish one call when i create table
but have 2 for moment because create columns & field.

so i wish not pass but ajax in datatable attribut
but directly put him his data!
not work because editor be not linked??

allan · July 2021

You can make the Ajax call yourself to get both the columns and the data in a single call - then initialise both your DataTable and Editor as normal (passing in the data and columns options to DataTables).

Allan

pascal81 · July 2021

work but not change bdd like this

pascal81 · July 2021

i try this, for upload
editor.on( 'uploadXhrSuccess', function ( e, json, data ) {
// debug();
editor
.edit( table.rows( {selected: true } ).indexes(), false )
.val( 'document', data.upload.id)
.submit();
} );

but not found document like this
or
he found it like this
editor.file("document",id)

pascal81 · July 2021

sorry it's me,
editor.on( 'uploadXhrSuccess', function ( e, json, data ) {
// debug();
editor
.edit( table.rows( {selected: true } ).indexes(), false )
.val( 'Facturation.document', data.upload.id)
.submit();
} );
but like this..

dataTables.editor.min.js:41 Uncaught Unknown file id 47 in table document

or value is enter in bdd

pascal81 · July 2021

finally work,
but i need disable
display in field be upload..

& display with render of columns

allan · July 2021

but i need disable display in field be upload..

field().disable() can be used to disable a field.

Regards,
Allan

pascal81 · July 2021

in follow of...
i have "sous table" opening on first colums
this 2nd work fine, by editor too & be joined on first table
but
for Upload, not accept or understand???

debug=()=>{
        var url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
        if (typeof DT_Debug != 'undefined') {
            if (DT_Debug.instance !== null) {
                DT_Debug.close();
            } else {
                new DT_Debug();
            }
        } else {
            var n = document.createElement('script');
            n.setAttribute('language', 'JavaScript');
            n.setAttribute('src', url + '?rand=' + new Date().getTime());
            document.body.appendChild(n);
        }
    };

for table

editor.on( 'uploadXhrSuccess',  ( e, json, data ) =>{
             // debug();
             console.log(table.rows( {selected: true } ).indexes());
             editor
                 .edit( table.rows( {selected: true } ).indexes(), false )
                 .val( 'Facturation.document', data.upload.id)
                 .submit();
         } );
for sstable
sseditor.on( 'uploadXhrSuccess',  ( e, json, data ) =>{

                        sseditor
                            .edit( sstable.rows( {selected: true } ).indexes(), false )
                            .val( 'Facturation.document', data.upload.id)
                            .submit()
                            ,debug();
                    } );

similar
but

not update Facturation.document

allan · July 2021

I don't understand I'm afraid. There is nothing in the above code about disabling a field. Also, I'm not sure why you've posted the debugger code.

Allan

pascal81 · July 2021

not debugger code here,
just
sseditor not edit
Facturation.document!!

not change, do nothing

datatable1.7.1 editor 2.0.4 upload generation

datatable1.7.1 editor 2.0.4 upload generation

Replies

Howdy, Stranger!

Categories

DataTables

datatable1.7.1 editor 2.0.4 upload generation

datatable1.7.1 editor 2.0.4 upload generation

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables