Parent-child editing: editor on child table not showing data

martinconnollybart

I have a use case which is very similar to the example for parent/child editing.
Here is my javascript:

    $(document).ready(function() {
        var fundEditor = new DataTable.Editor( {
            ajax: 'php/table.TFunders.php',
            table: '#TFunders',
            fields: [
                {
                    "label": "Fund Name:",
                    "name": "fundname"
                },
                {
                    "label": "Contact:",
                    "name": "contact"
                },
                {
                    "label": "Parent Org:",
                    "name": "parentorg"
                }
            ]
        } );
    
        var fundTable = new DataTable('#TFunders', {
            ajax: 'php/table.TFunders.php',
            columns: [
                {
                    "data": "fundname", 
                    "label":"Fund Name"
                },
                {
                    "data": "contact"
                },
                {
                    "data": "parentorg"
                }
            ],
            dom: 'Bfrtip',
            select: {
             style: 'single'
            },
            buttons: [
                { extend: 'create', editor: fundEditor },
                { extend: 'edit', editor: fundEditor },
                { extend: 'remove', editor: fundEditor }
            ],
            scrollY: "275px",
            "paging": false,
            "autoWidth": false
        } );


        var appEditor = new DataTable.Editor( {
            ajax: {
                url: 'php/table.TApplications.php',
                type: 'post',
                data: function(d) {
                    var selected=fundTable.row({selected: true});
                    if(selected.any()){
                        d.funderid=selected.data().id;
                    }
                }
            },
            table: '#TApplications',
            fields: [
               
                {
                    "label": "Purpose:",
                    "name": "purpose"
                },
                {
                    "label": "Req Yr 1:",
                    "name": "requestedyear1"
                },
                {
                    "label": "Decn Likely:",
                    "name": "decisionlikely"
                }
            ]
        } );

        var appTable = new DataTable('#TApplications', {
            dom: 'Bfrtip',
            ajax: {
                url: 'php/table.TApplications.php',
                type: 'post',
                data: function(d){
                    var selected = fundTable.row({selected: true});
                    if (selected.any()) {
                        d.funderid = selected.data().id;
                    }
                }
            },
            columns: [
                {
                    "data": "TApplications.purpose", "label":"Purpose"
                },
                {
                    "data": "TApplications.requestedyear1", "label":"Req Year 1"
                },
                {
                    "data": "TApplications.decisionlikely", "label":"Decn Likely"
                }
            ],
            select: true,
            lengthChange: false,
            scrollY: "275px",
            "paging": false,
            "autoWidth": false,
            serverSide: true,
            buttons: [
                {
                    extend: 'create',
                    editor: appEditor,
                    enabled: false,
                    init: function (dt) {
                        var that = this;
                        fundTable.on('select deselect', function () {
                            that.enable(fundTable.rows({ selected: true }).any());
                        });
                    }
                },
                { extend: 'edit', editor: appEditor },
                { extend: 'remove', editor: appEditor }
            ],
        } );



        fundTable.on('select', function(){
            appTable.ajax.reload();

        });

        fundTable.on('deselect', function(){
            appTable.ajax.reload();
        });

        appEditor.on('submitSuccess', function () {
            fundTable.ajax.reload();
        });
         
        fundEditor.on('submitSuccess', function () {
            appTable.ajax.reload();
        });


    } );

and PHP:

```php
<?php
include( "../lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'TFunders')
->fields(
Field::inst( 'id' )->set( false ),
Field::inst( 'fundname' ),
Field::inst( 'contact' ),
Field::inst( 'parentorg' )
)
->join(
Mjoin::inst('TApplications')
->link('TFunders.id','TApplications.funderid')
->fields(
Field::inst('id'),
)
)
->process( $_POST )
->json();

<?php > ``` ?>

second file:

```php
<?php
include( "../lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;

if(!isset($_POST['funderid']) || ! is_numeric($_POST['funderid'])) {
echo json_encode(["data" => []]);
} else {

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'TApplications' )
->fields(
Field::inst( 'TApplications.purpose' ),
Field::inst( 'TApplications.requestedyear1' ),
Field::inst( 'TApplications.decisionlikely' )
)
->leftJoin('TFunders', 'TFunders.id', '=', 'TApplications.funderid')
->where ('funderid', $_POST['funderid'])
->process( $_POST )

->json();

}

<?php > ``` ?>

The debugger shows no problems.

No error messages are shown.

The parent table editor works correctly.
When I select a row from the parent table, the child rows are loaded correctly. But when I select a row in the child table and press "edit" the Editor dialog has no data.

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

kthorngren

I don't think you have the child Editor fields defined properly. I believe they should look like this:

        fields: [
 
            {
                "label": "Purpose:",
                "name": "TApplications.purpose"
            },
            {
                "label": "Req Yr 1:",
                "name": "TApplications.requestedyear1"
            },
            {
                "label": "Decn Likely:",
                "name": "TApplications.decisionlikely"
            }
        ]

Which matches the columns.data definition. Similar to this example.

Kevin

martinconnollybart

Oh wow, thank you. That has been driving me nuts!!