Parent/Child editing, i can't pass the variable

Stormed

Good morning,
I followed the directions in this article https://datatables.net/blog/2019-01-11
but I can't pass the "DOMANDA_ID" variable to risposte-elenco-invia.php
i think the problem is here, d.domanda = rowData.DOMANDA_ID; and here def: rowData.DOMANDA_ID but i don't know what to put in

function createChild ( row ) {
    var rowData = row.data();


   var table = $('<table class="display" width="100%"/>');


    row.child( table ).show();


   var risposteEditor = new $.fn.dataTable.Editor( {
    ajax: {
        url: 'risposte-elenco-invia.php',
        data: function ( d ) {
         d.domanda = rowData.DOMANDA_ID;
        }
    },
    table: table,
    fields: [ 
        {
            label: "DOMANDA ID:",
            name: "risposte.DOMANDA_ID",
            def: rowData.DOMANDA_ID
        }, {
            label: "ESATTA:",
            name: "risposte.RISPOSTA_ESATTA"
        }, {
            label: "TESTO:",
            name: "risposte.RISPOSTA_TESTO"
        }
    ]
    });

var risposteTable = table.DataTable( {
    dom: 'Bfrtip',
    ajax: {
        url: 'risposte-elenco-invia.php',
        type: 'post',
        data: function ( d ) {
          d.domanda = rowData.DOMANDA_ID;
        }
    },
    columns: [
        { title: 'Id', data: 'risposte.RISPOSTA_ID' },
        { title: 'Domanda', data: 'risposte.DOMANDA_ID' },
        { title: 'Esatta', data: 'risposte.RISPOSTA_ESATTA' },
        { title: 'Testo', data: 'risposte.RISPOSTA_TESTO' }
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: risposteEditor },
        { extend: 'edit',   editor: risposteEditor },
        { extend: 'remove', editor: risposteEditor }
    ]
} );

    risposteEditor.on( 'submitSuccess', function (e, json, data, action) {
        row.ajax.reload(function () {
            $(row.cell( row.id(true), 0 ).node()).click();
        });
    } );

}   

function updateChild(row) {
    $("table", row.child())
        .DataTable()
        .ajax.reload();
}

function destroyChild(row) {
    // Remove and destroy the DataTable in the child row
    var table = $("table", row.child());
    table.detach();
    table.DataTable().destroy();

    // And then hide the row
    row.child.hide();
}

$(document).ready(function() {
  var  domandeEditor = new $.fn.dataTable.Editor( {
        ajax: "domande-elenco-invia.php",
        table: "#domande",
        fields: [ 
            {
                label: "Testo:",
                name: "domande.TESTO"
            },{
                label: "Legge:",
                name: "domande.LEGGE_ID",
                type:  "select"
            },{
                label: "Materia:",
                name: "domande.MATERIA_ID"
            }, {
                label: "Concorso",
                name: "domande.CONCORSO_ID"
            },  {
                label: "Test n.",
                name: "domande.TEST_ID"
            }
        ]
    } );





    var domandeTable = $('#domande').DataTable( {
        dom: "Bfrtip",
        ajax: "domande-elenco-invia.php",
        aLengthMenu: [[50, 100, 200, -1], [50, 100, 200, "Tutti"]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'details-control',
                orderable: false
            },
            { data: "domande.DOMANDE_ID" },
            { data: "domande.TESTO" },
            { data: null,  render: function(data, type, row, meta) {
                return row.legge.LEGGE_N + '/' + row.legge.LEGGE_ANNO
            }},
            { data: "domande.MATERIA_ID" },
            { data: "domande.CONCORSO_ID" },
            { data: "domande.TEST_ID"}
        ],

        order: [ 1, 'desc' ],
        select: {
            style:    'os',
            selector: 'td:not(first-child)'
        },
        buttons: [
            { extend: "create", editor: domandeEditor },
            { extend: "edit",   editor: domandeEditor },
            { extend: "remove", editor: domandeEditor }
        ]
    } );


      $('#domande tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = domandeTable.row(tr);

        if ( row.child.isShown() ) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
        }
        else {
            // Open this row
            createChild(row);
            tr.addClass('shown');

        }
    });


    domandeEditor.on("submitSuccess", function() {
        domandeTable.rows().every(function() {
            if (this.child.isShown()) {
                updateChild(this);
            }
        });
    });

});

file risposte-elenco-invia.php

if ( !isset($_POST['domanda']) || !is_numeric($_POST['domanda']) ) {
    echo json_encode( [ "data" => [] ] );
}
else {
$db->sql("SET names 'utf8'");
Editor::inst( $db, 'risposte', 'RISPOSTA_ID')
    ->fields(

        Field::inst( 'risposte.RISPOSTA_ID' ),    
        Field::inst( 'risposte.DOMANDA_ID' ),   
        Field::inst( 'risposte.RISPOSTA_ESATTA' ),
        Field::inst( 'risposte.RISPOSTA_TESTO' )
    )
->leftJoin( 'domande', 'domande.DOMANDE_ID', '=', 'risposte.DOMANDA_ID' )
->where ("risposte.DOMANDA_ID", $_POST['domanda'])
    ->process( $_POST )
    ->json();
    }

allan

Looks like you need to use:

d.domanda = rowData.risposte.DOMANDA_ID;

Since the DOMANDA_ID is inside a risposte object.

Allan

Stormed

was
d.domanda = rowData.domande.DOMANDE_ID;

Thanks

Stormed

With the same code (exept d.domanda = rowData.domande.DOMANDE_ID;) it gives me this error
DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter '4' for row 0, column 4. For more information about this error, please see http://datatables.net/tn/4

but here the columns are 4

    var risposteTable = table.DataTable( {
        dom: 'Bfrtip',
        ajax: {
            url: 'risposte-elenco-invia.php',
            type: 'post',
            data: function ( d ) {
                d.domanda = rowData.domande.DOMANDE_ID;
            }
        },
        columns: [
            { title: 'Id', data: 'risposte.RISPOSTA_ID' },
            { title: 'Domanda', data: 'risposte.DOMANDA_ID' },
            { title: 'Esatta', data: 'risposte.RISPOSTA_ESATTA' },
            { title: 'Testo', data: 'risposte.RISPOSTA_TESTO' }
        ],

allan

Ah - your HTML is defining at least six columns there, but your Javascript is only defining four. Hence the error.

Allan

Stormed

My html is

<table id="domande" class="table">
                            <thead>
                                <tr> 
                                    <th></th>
                                    <th>Id</th>
                                    <th>Test</th>
                                    <th>Legge</th>
                                    <th>Materia</th>
                                    <th>Concorso</th>
                                    <th>Test</th>
                                </tr>
                            </thead>
      </table>

but is for the parent table, the warning is for child table.

As shown in the example in the blog, the child table is created (i think) iwith this code only

    function createChild ( row ) {
        var rowData = row.data();

        var table = $('<table class="display" width="100%"/>');

    //...

    var risposteTable = table.DataTable( {
        dom: 'Bfrtip',
        ajax: {
            url: 'risposte-elenco-invia.php',
            type: 'post',
            data: function ( d ) {
                d.domanda = rowData.domande.DOMANDE_ID;
            }
        },
        columns: [
            { title: 'Id', data: 'risposte.RISPOSTA_ID' },
            { title: 'Domanda', data: 'risposte.DOMANDA_ID' },
            { title: 'Esatta', data: 'risposte.RISPOSTA_ESATTA' },
            { title: 'Testo', data: 'risposte.RISPOSTA_TESTO' }
        ],
        select: true,
        buttons: [
            { extend: 'create', editor: risposteEditor },
            { extend: 'edit',   editor: risposteEditor },
            { extend: 'remove', editor: risposteEditor }
        ]
    } );

It's correct?
Here https://datatables.net/blog/2019-01-11 I have not found any other code

allan

You've got 7 columns in the HTML and 4 in the Javascript. How many do you want? If 4, remove the extra ones from the HTML. If 7 then tell DataTables what to display in them.

Allan

Stormed

My 7 columns in HTML is for PARENT TABLE and it's OK (green in the image)

4 columns in javascritp is for CHILD TABLE bus here are 6 columns (red in the image)

If i remove 2 o 3 columns in the html, i remove them from del PARENT TABLE, not from child

allan

I'm going to need a link to your page to figure this one out please. It isn't clear to me where the 5 and 6 columns are coming from in the above code.

Thanks,
Allan

Stormed

https://allenaconcorsi.it/test/domande-elenco.php

Tnks

kthorngren

You are loading the colReorder library but it doesn't look like you are using it. I see this with the child Datatable:

<th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" data-column-index="4" aria-label=": activate to sort column ascending"></th>

I believe data-column-index is something ColReorder adds, not sure though. Maybe there is an issue where ColReorder isn't applied correctly and causes the extra columns.

Try removing this:

<script src="https://www.allenaconcorsi.it/js/datatables/col_reorder.min.js"></script>

I don't see a reference to loading jquery.dataTables.min.css.

Also I see duplicate sorting arrows. You have a non-standard set being displayed by all.min.css.

Let us know if removing ColReorder helps.

Kevin

Stormed

Thanks for your help. I removed
<script src="https://www.allenaconcorsi.it/js/datatables/col_reorder.min.js"></script>
but nothing has changed.

This
jquery.dataTables.min.css
is the fourth stylesheets

EDIT:
I tried to remove this
<script src="<?php echo $site_url;?>js/datatables/datatables_extension_reorder.js"></script>

and it's ok thank you