Parent child editor - child editor do not trigger update query

carrarachristophe · September 27

Hello,
I am trying to implement the parent child editor but fail to update the child.

I tryied both methods:
* https://editor.datatables.net/examples/datatables/parentChild
* https://editor.datatables.net/examples/advanced/parentChild / https://datatables.net/blog/2016/parent-child-editing

For both:
1. I can see and update the parent table
2. I can see the childs of the each parent
3. BUT when I try to update a child, nothing happens. I can only see with the debug that no UPDATE query runs.

Is anyone able to locate what is missing or wrong?
I copy / pasted the code from the examples and adapted it several times, but it always leads to the same result.

Thanks and regards,
Christophe

carrarachristophe · September 27

here is my code for the fist method:

(function($){
    
var editor;

$(document).ready(function() {
    
// Nested editor
const facturearticleEditor = new DataTable.Editor({
    ajax: {
        url: 'php/table.fac_facturearticles.php',
        data: function (d) {
            let selected = factureTable.row({ selected: true });
            if (selected.any()) {
                d.facture = selected.data().fac_factures.facture_id;
            }
        }
    },
    fields: [
        {
            label: 'Facture:',
            name: 'fac_facturearticles.facture'
        },
        {
            label: 'Quantité:',
            name: 'fac_facturearticles.quantite'
        },
        {
            label: 'Article:',
            name: 'fac_facturearticles.article',
            type: 'select',
            placeholder: 'Selectionnez un article'
        },
        {
            label: 'Prix unitaire:',
            name: 'fac_facturearticles.prixunitaire'
        }
    ],
    table: '#fac_facturearticles'
});
 
// Main / parent / top level Editor
let factureTable;
const factureEditor = new DataTable.Editor({
    ajax: 'php/table.fac_factures.php',
    table: '#fac_factures',
    fields: [
        {
            "label": "Société:",
            "name": "fac_factures.facture_societe",
            type: 'select',
            placeholder: '',
            placeholderDisabled: false,
            placeholderValue: null
        },
        {
            "label": "Client:",
            "name": "fac_factures.facture_client",
            type: 'select',
            placeholder: '',
            placeholderDisabled: false,
            placeholderValue: null
        },
        {
            "label": "Statut:",
            "name": "fac_factures.facture_statut",
            type: 'select',
            placeholder: '',
            placeholderDisabled: false,
            placeholderValue: null
        },
        {
            "label": "Devise:",
            "name": "fac_factures.facture_devise",
            type: 'select',
            placeholder: '',
            placeholderDisabled: false,
            placeholderValue: null
        },
        {
            label: "Date de facture:",
            name: "fac_factures.facture_date",
            type: "datetime",
            format: "DD\/MM\/YYYY"
        },
        {
            label: "Date d'échéance:",
            name: "fac_factures.facture_duedate",
            type: "datetime",
            format: "DD\/MM\/YYYY"
        },
        {
            "label": "Ma référence:",
            "name": "fac_factures.ref"
        },
        {
            "label": "Référence client:",
            "name": "fac_factures.ref_client"
        },
        {
            label: 'Articles:',
            name: 'fac_facturearticles.facture',
            type: 'datatable',
            editor: facturearticleEditor,
            submit: false,
            optionsPair: {
                value: 'fac_facturearticles.facturearticle_id'
            },
            config: {
                ajax: {
                    url: 'php/table.fac_facturearticles.php',
                    type: 'post',
                    data: function (d) {
                        if (factureTable) {
                            let selected = factureTable.row({ selected: true });
                            if (selected.any()) {
                                d.facture = selected.data().fac_factures.facture_id;
                            }
                        }
                    }
                },
                buttons: [
                    { extend: 'create', editor: facturearticleEditor },
                    { extend: 'edit', editor: facturearticleEditor },
                    { extend: 'remove', editor: facturearticleEditor }
                ],
                columns: [
                    { data: 'fac_facturearticles.facture', title: 'Facture' },
                    { data: 'fac_facturearticles.quantite', title: 'Quantité' },
                    { data: 'fac_articles.article', title: 'Article' },
                    { data: 'fac_facturearticles.prixunitaire', title: 'Prix unitaire' }
                ]
            }
        }
    ]
});
 
// factures DataTable shown in the page
factureTable = new DataTable('#fac_factures', {
    ajax: 'php/table.fac_factures.php',
    columns: [
        {"data": "fac_factures.facture_id"},
        {"data": "tms_rf_company.CompanyName"},
        {"data": "fac_clients.client"},
        {"data": "tms_sy_statut.Statut"},
        {"data": "fac_factures.facture_date"},
        {"data": "fac_factures.facture_duedate"},
        {data: null, render: function ( data, type, row ) {
            return type === 'display'? '<div title="' + data.devises.devise_en + '">' + data.devises.devise_code + '</a>' + '</div>' : data.devises.devise_code + '</a>';
        }}
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: factureEditor },
                { extend: 'edit', editor: factureEditor },
                { extend: 'remove', editor: factureEditor }
            ]
        }
    },
    select: {
        style: 'single'
    }
});
 
factureEditor.on('initEdit', function () {
    // Unhide in case of being hidden by create
    factureEditor.field('fac_facturearticles.facture').show();
 
    // Get articles for the selected facture
    factureEditor
        .field('fac_facturearticles.facture')
        .dt()
        .ajax.reload(function (json) {
            // Update the options for the sub-editor. This will be automatic
            // in future versions of Editor
            facturearticleEditor.field('fac_facturearticles.facture').update(json.options['fac_facturearticles.facture']);
        });
 
    // Set the default for the "new" article facture field
    facturearticleEditor
        .field('fac_facturearticles.facture')
        .def(factureTable.row({ selected: true }).data().id);
});
 
// Disable the ability to create a new article on a new facture
factureEditor.on('initCreate', function () {
    factureEditor.field('fac_facturearticles.facture').hide();
});


} );

}(jQuery));

carrarachristophe · September 27

here is my code for the second method

(function($){
    
var editor;

$(document).ready(function() {

    const factureEditor = new DataTable.Editor({
        ajax: 'php/table.fac_factures.php',
        fields: [
            {
                "label": "Société:",
                "name": "fac_factures.facture_societe",
                type: 'select',
                placeholder: '',
                placeholderDisabled: false,
                placeholderValue: null
            },
            {
                "label": "Client:",
                "name": "fac_factures.facture_client",
                type: 'select',
                placeholder: '',
                placeholderDisabled: false,
                placeholderValue: null
            },
            {
                "label": "Statut:",
                "name": "fac_factures.facture_statut",
                type: 'select',
                placeholder: '',
                placeholderDisabled: false,
                placeholderValue: null
            },
            {
                "label": "Devise:",
                "name": "fac_factures.facture_devise",
                type: 'select',
                placeholder: '',
                placeholderDisabled: false,
                placeholderValue: null
            },
            {
                label: "Date de facture:",
                name: "fac_factures.facture_date",
                type: "datetime",
                format: "DD\/MM\/YYYY"
            },
            {
                label: "Date d'échéance:",
                name: "fac_factures.facture_duedate",
                type: "datetime",
                format: "DD\/MM\/YYYY"
            },
            {
                "label": "Ma référence:",
                "name": "fac_factures.ref"
            },
            {
                "label": "Référence client:",
                "name": "fac_factures.ref_client"
            }
        ],
        table: '#fac_factures'
    });

    const factureTable = $('#fac_factures').DataTable({
        ajax: 'php/table.fac_factures.php',
        columns: [
            {"data": "fac_factures.facture_id"},
            {"data": "tms_rf_company.CompanyName"},
            {"data": "fac_clients.client"},
            {"data": "tms_sy_statut.Statut"},
            {"data": "fac_factures.facture_date"},
            {"data": "fac_factures.facture_duedate"},
            {data: null, render: function ( data, type, row ) {
                return type === 'display'? '<div title="' + data.devises.devise_en + '">' + data.devises.devise_code + '</a>' + '</div>' : data.devises.devise_code + '</a>';
            }}
        ],
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: factureEditor },
                    { extend: 'edit', editor: factureEditor },
                    { extend: 'remove', editor: factureEditor }
                ]
            }
        },
        order: [[ 0, 'asc' ]],
        language: {"url": "json/fr-FR.json"},
        select: {
            style: 'single'
        }
    });

const facturearticleEditor = new DataTable.Editor({
    ajax: {
        url: 'php/table.fac_facturearticles.php',
        data: function (d) {
            var selected = factureTable.row({ selected: true });
            if ( selected.any() ) {
                d.facture = selected.data().fac_factures.facture_id;
            }
        }
    },
    fields: [
        {
            label: 'Facture:',
            name: 'fac_facturearticles.facture'
        },
        {
            label: 'Quantité:',
            name: 'fac_facturearticles.quantite'
        },
        {
            label: 'Article:',
            name: 'fac_facturearticles.article',
            type: 'select',
            placeholder: 'Selectionnez un article'
        },
        {
            label: 'Prix unitaire:',
            name: 'fac_facturearticles.prixunitaire'
        }
    ],
    table: '#fac_facturearticles'
});

    const facturearticleTable = $('#fac_facturearticles').DataTable({
        ajax: {
            url: 'php/table.fac_facturearticles.php',
            type: 'post',
            data: function ( d ) {
                var selected = factureTable.row({ selected: true });
                if ( selected.any() ) {
                    d.facture = selected.data().fac_factures.facture_id;
                }
            }
        },
        columns: [
            { data: 'fac_facturearticles.facture' },
            { data: 'fac_facturearticles.quantite' },
            { data: 'fac_facturearticles.article' },
            { data: 'fac_facturearticles.prixunitaire' }
        ],
        layout: {
            topStart: {
                buttons: [
                    {
                        extend: 'create',
                        editor: facturearticleEditor,
                        enabled: false,
                        init: function (dt) {
                            factureTable.on('select deselect', () => {
                                this.enable(factureTable.rows({ selected: true }).any());
                            });
                        }
                    },
                    { extend: 'edit', editor: facturearticleEditor },
                    { extend: 'remove', editor: facturearticleEditor }
                ]
            }
        },
        language: {"url": "json/fr-FR.json"},
        select: true
    });

factureTable.on('select', function (e) {
    facturearticleTable.ajax.reload();

    facturearticleEditor
        .field('fac_facturearticles.facture')
        .def(factureTable.row({ selected: true }).data().fac_factures.facture_id);
});
 
factureTable.on('deselect', function () {
    facturearticleTable.ajax.reload();
});
 
facturearticleEditor.on('submitSuccess', function () {
    factureTable.ajax.reload();
});
 
factureEditor.on('submitSuccess', function () {
    facturearticleTable.ajax.reload();
});

} );

}(jQuery));

allan · September 27

Hi Christophe,

Can you link to the page you are working on so I can take a look please? You can PM it to me if you don't want to make the link public.

Allan

carrarachristophe · November 16

Hello Allan,
I managed to fix it.
Hard to say what the problem was because I started several times from scratch, but I think the issue was that part.

    // Set the default for the "new" article facture field
    facturearticleEditor
        .field('fac_facturearticles.facture')
        .def(factureTable.row({ selected: true }).data().**id**);
});

    // Set the default for the "new" article facture field
    facturearticleEditor
        .field('fac_facturearticles.facture')
        .def(factureTable.row({ selected: true }).data().**fac_factures.facture_id**);
});

Question for you: is there a way to be able to create a child at the same time as creating the parent?

allan · November 18

Not really - not using nested Editors like that at least. The nested Editor is async to the host Editor, it submits and then returns control to the host.

Allan

carrarachristophe · November 23

Any idea for a workaround that would work like: upon creation of the parent, the parent would close and reopen automatically?

Parent child editor - child editor do not trigger update query

Parent child editor - child editor do not trigger update query

Answers

Howdy, Stranger!

Categories

DataTables

Parent child editor - child editor do not trigger update query

Parent child editor - child editor do not trigger update query

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables