datatable1.7.1 editor 2.0.4 upload generation

datatable1.7.1 editor 2.0.4 upload generation

pascal81pascal81 Posts: 14Questions: 1Answers: 0
edited July 2021 in Editor

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.

Replies

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

    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

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

    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??

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

    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

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

    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??

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

    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

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

    work but not change bdd like this

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

    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)

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

    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

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

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

    & display with render of columns

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

    but i need disable display in field be upload..

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

    Regards,
    Allan

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0
    edited 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

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

    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

  • pascal81pascal81 Posts: 14Questions: 1Answers: 0

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

    not change, do nothing

Sign In or Register to comment.