Populating the parent key in the child

cypressit

I have a parent table (invoices) and a child table (details). I am using the editor to work the parent child example I found here on this site. My issues is that I must manually populate the invoice_id filed in the child record when I use the "new" button. Is there a way to have this be automatically filled in when the form opens?

rf1234

Consider this:
1. JS - with Ajax you pass the id of the selected row of the parent table on to the PHP Editor instance of the child table:

var childEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'actions.php?action=tblChild',
            data: function ( d ) {
                var selected = parentTable.row( {selected: true} ); 
                if (selected.any()) {
                    d.id = selected.data().id;
                }
            }
        },

1. PHP - set value of parent_id in child table with ->set and ->setValue

if ( ! isset($_POST['id']) || ! is_numeric($_POST['id']) ) {
        echo json_encode( [ "data" => [] ] );
    } else {
        Editor::inst( $db, 'child' )
        ->field(
            Field::inst( 'child.parent_id' )->set(Field::SET_CREATE)
                                    ->setValue( $_POST['id'] )
            
        )
        ->process($_POST)
        ->json();
    }

allan

Is it this you are using? Parent / child with Editor?

The parent id should be set by the call to field().def() for new records.

Allan

rf1234

Why wouldn't you recommend my way of doing it on the server side? Under normal circumstances you don't really want to see the artificial auto-increment id of a parent row on the screen anyway ...

allan

I was keeping it as part of the Editor form submit as it means its easy to change the value (either on create or edit).

Doing it server-side with the extra parameter as you have is perfectly valid as well. A little extra code on the server-side, rather than a little extra on the client .

Allan

cypressit

I had tried that I thought. When the new form opens, I have to manually populate the invoice_id. Here is my code:

<script>
    var editor; // use a global for the submit and return data rendering in the examples
    var detailsEditor;
    var invoiceTable;
    var detailsTable;
    $(document).ready(function() {




        editor = new $.fn.dataTable.Editor( {
            "ajax": "invoice/invoiceData",
            "table": "#invoices",
            "fields": [ {
                    "label": "Number:",
                    "name": "number"
                }, {
                    "label": "Customer Id:",
                    "name": "customer_id"
                }, {
                    "label": "Date:",
                    "name": "date",
                    "type": "datetime"
                }, {
                    "label": "Status:",
                    "name": "status"
                }
            ]
        } );

       invoiceTable =  $('#invoices').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url: "<?php echo base_url();?>invoice/invoiceData",
                type: "POST"
            },
            serverSide: true,
            columns: [
                { data: "id" },
                { data: "number" },
                { data: "customer_id" },
                { data: "date" },
                { data: "status"}
            ],
            select: {   style: 'single' },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );


        detailsEditor = new $.fn.dataTable.Editor( {
            "ajax": {
                url: "<?php echo base_url();?>invoice/invoiceDetailsData",
                data: function ( d ) {
                    var selected = invoiceTable.row( { selected: true } );
                    if ( selected.any() ) {
                        d.invoice_id = selected.data().id;
                    }
                }
            },
            "table": '#invoiceDetails',
            "fields": [
                {
                "label": "Invoice Id:",
                "name": "invoice_id"
            }, {
                "label": "Item:",
                "name": "item"
            }, {
                "label": "Description:",
                "name": "description"

            }, {
                "label": "Rate:",
                "name": "rate"
            }, {
                "label": "Quantity:",
                "name": "quantity"
            }, {
                "label": "Amount:",
                "name": "amount"
            }
            ]

        } );

       detailsTable =  $('#invoiceDetails').DataTable( {
            dom: 'Bfrtip',
            ajax: {
                url: "<?php echo base_url();?>invoice/invoiceDetailsData",
                type: 'post',
                data: function ( d ) {


                    var selected = invoiceTable.row( { selected: true } );

                    if ( selected.any() ) {
                        //detailsEditor.field( 'invoice_is').def( selected.data().id );
                        d.invoice_id = selected.data().id;
                    }
                }
            },
            columns: [
                { data: 'id' },
                { data: 'invoice_id' },
                { data: 'item' },
                { data: 'description' },
                { data: 'rate' },
                { data: 'quantity' },
                { data: 'amount' }
            ],

            select: true,

            buttons: [
                { extend: 'create', editor: detailsEditor },
                { extend: 'edit',   editor: detailsEditor },
                { extend: 'remove', editor: detailsEditor }
            ]
        } );

        invoiceTable.on( 'select', function () {
            $('#childDiv').show();
            detailsTable.ajax.reload();
            detailsEditor.field( 'invoiceDetails.invoice_id' );
        } );
        
        invoiceTable.on( 'deselect', function () {
            $('#childDiv').hide();
            detailsTable.ajax.reload();
        } );
    } );

</script>

cypressit

Wow, this is the first time I tried to post code. How do I format it so you can read it?

rf1234

Use Markdown, see below. Triple back ticks to highlight code.

rf1234

You can also drop the invoice id from the form of the child table and set it on the server side as per my example above. If it is not in the child table form you cannot be asked to enter it Allan confirmed that both ways (client or server side) are acceptable.

allan

I've edited the post to use Markdown to make the code readable.

I don't see any code in the above that will set the default for the invoice_id.

This is the part of the blog post that is relevant for that.

Allan

cypressit

Thanks! That one line change made all the difference!