Parent / Child Editing not returning value from selected row

Parent / Child Editing not returning value from selected row

bpitonibpitoni Posts: 21Questions: 7Answers: 2

I've attempted to follow the example here https://datatables.net/blog/2016-03-25 to set up parent/child table editing, but when a row is selected in the parent table, it does not submit the id value from the parent table to the child. table.row( { selected: true } ).data().id returns "undefined".
I've tried testing it with the other fields (not just id), but it is always undefined. Code below. Thanks for any help.

Javascript

var person_esw_editor;
var esw_editor;
    

    $(document).ready(function() {
            
       // ========================================================================================= //
    // PERSON ESW DATA-EDITOR
    // ========================================================================================= //
        person_esw_editor = new $.fn.dataTable.Editor( {
            ajax: "./queries/person_esw.php",
            table: "#person_esw",
            fields: [             
            {
                label: "FamisID",
                name: "person.famis_id",
                type: "text",
                attr: {
                    maxlength: 10
                }
            }, {
                label: "First Name",
                name: "person.first_name",
                type: "text"
            }, {
                label: "Last Name",
                name: "person.last_name",
                type: "text"
            },  {
                label: "Pager",
                name: "person.pager_number"     
            }, {    
                type: "radio",  
                label: "disable/terminated",
                name: "person.disabled",
                options: [  
                    { label: "No", value: 0 },              
                    { label: "Yes", value: 1 }
                ]           
              }     
            ]
        });
        
    // ============================================================================================ //
    // PERSON ESW DATA-TABLE
    // ======================================================================================= //   
        var person_esw_table = $('#person_esw').DataTable( {            
            pageLength: 10,     
            order: [[1, "asc"]],
            dom: "Bfrtlip",     
            ajax: {
                url: "./queries/person_esw.php",    
                type: 'POST'
            },
        
    columns: [  
           { data: "person.famis_id" }, 
           { data: "person", 
                render: function( data, type, row ) {
                    return data.last_name + ', ' + data.first_name;
                } 
            },
     { data: 'person',                              
                  render: function( data, type, row ) { 
                    var pager = '';                         

                    if(data.pager_number) { pager = data.pager_number; } 
                        
                    return pager; }
           }                                
        ],
 
        select: {
            style: 'single'
        },
        
        buttons: [
                
                { extend: "create", editor: person_esw_editor },
                { extend: "edit",   editor: person_esw_editor },
                { extend: "selectNone", text: "Deselect Row(s)" }
       ]

    } );   
    
        
    // ============================================================================================ //
    // ESW DATA-EDITOR
    // ====================================================================================== //
    esw_editor = new $.fn.dataTable.Editor( {
            ajax:  {
                url: "./queries/esw_employees3.php",
                data: function ( d ) {
                    var selected = person_esw_table.row( { selected: true } );
                    if ( selected.any() ) {
                        d.esw_id = selected.data().user_id;
                    }
                }
            },
            table: "#esw_specific",
            fields: [ 
            {
                label: "ESW ID",
                name: "esw_employees.esw_id",
                type: "select"
            },
            {
                label: "First Name",
                name: "person.first_name",
                type: "readonly"
            }, {
                label: "Last Name",
                name: "person.last_name",
                type: "readonly"
            },  {
                label: "Title",
                name: "esw_employees.title",
                type: "select",
                options: [
                    {'label': '', 'value': ''},
                    {'label': 'Furniture and Property', 'value': 'Furniture and Property'},
                    {'label': 'Project Relief', 'value': 'Project Relief'},
                    {'label': 'Elwood Floater', 'value': 'Elmwood Floater'},
                    {'label': 'ResLife Floater', 'value': 'ResLife Floater'},
                    {'label': 'Riverside Floater', 'value': 'Riverside Floater'},
                    {'label': 'Working Leader', 'value': 'Working Leader'}
                ]                                       
            }, {    
                label: "Schedule",
                name: "esw_employees.schedule",             
                type: "text" 
            }, {    
                label: "Notes",
                name: "esw_employees.note",
                type: "textarea",   
                placeholder: "",
                placeholderDisabled: false              
              } 
            ]
        });

    
    // ============================================================================================ //
    // ESW DATA-TABLE
    // ======================================================================================== //  
        var esw_table = $('#esw_specific').DataTable( {         
            pageLength: 10,     
            order: [[1, "asc"]],
            dom: "Bfrtlip",     
            ajax: {
                url: "./queries/esw_employees3.php",    
                type: 'POST',
                data: function ( d ) {
                    var selected = person_esw_table.row( { selected: true } );
                    if ( selected.any() ) {
                        d.esw_id = selected.data().user_id;
                    }
                }
            },
        
    columns: [  
           { data: "person.famis_id" }, 
           { data: "person", 
                render: function( data, type, row ) {
                    return data.last_name + ', ' + data.first_name;
                } 
            },
           { data: "esw_employees.title" }, 
           { data: "esw_employees.schedule" },   
           { data: "esw_employees.note" }                                   
        ],
 
        select:  {
            style: 'single'
        },
        
        buttons: [

                { extend: "create", editor: esw_editor },
                { extend: "edit",   editor: esw_editor },
                { extend: "selectNone", text: "Deselect Row(s)" }

        ]

    } );
    
// ============================================================================================ //
// SELECT EVENTS
// When row selected in "person" table, esw table is reloaded with person.user_id passed to
// esw_employees.esw_id
// ============================================================================================ //
person_esw_table.on( 'select', function () {
    alert( person_esw_table.row( {selected: true } ).data().user_id );         //this returns 'undefined'
    esw_table.ajax.reload();
    
    esw_editor
        .field( 'esw_employees.esw_id' )
        .def( person_esw_table.row( { selected: true } ).data().user_id );
} );
person_esw_table.on( 'deselect', function () {
    esw_table.ajax.reload();
} );

esw_editor.on( 'submitSuccess', function() {
    person_esw_table.ajax.reload();
});
person_esw_editor( 'sbumitSuccess', function() {
    esw_table.ajax.reload();
});
  
});

PHP
person_esw.php

Editor::inst( $db, 'person', 'user_id' )    
    ->field(
        Field::inst( 'person.user_id' )->set(false),
        Field::inst( 'person.famis_id' )
            ->validator( 'Validate::required')
            ->validator( 'Validate::maxLen', 10 )
            ->setFormatter( function( $val, $data, $opts ) {
                return strtoupper($val);
            }),
        Field::inst( 'person.first_name' )
            ->validator( 'Validate::required'),
        Field::inst( 'person.last_name' )
            ->validator( 'Validate::required'),
        Field::inst( 'person.pager_number' )
            ->setFormatter('Format::ifEmpty', null)
                             
    )
    
    ->where( "person.esw", 1, "=")
    ->where( "person.disabled", 0, "=")

    ->process($_POST)
    ->json();

esw_employees3.php

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

else {

Editor::inst( $db, 'esw_employees', 'esw_id' )
    
    ->field(

        
        Field::inst( 'esw_employees.esw_id' )
                ->options( 'person', 'user_id', array('last_name', 'first_name') )
                ->validator( 'Validate::dbValues' ),
                
        Field::inst( 'person.famis_id' )
            ->validator( 'Validate::required')
            ->validator( 'Validate::maxLen', 10 )
            ->setFormatter( function( $val, $data, $opts ) {
                return strtoupper($val);
            }),
        Field::inst( 'person.first_name' )
            ->validator( 'Validate::required'),
        Field::inst( 'person.last_name' )
            ->validator( 'Validate::required'),

        Field::inst( 'esw_employees.title' )
            ->setFormatter('Format::ifEmpty', null),
        Field::inst( 'esw_employees.schedule' )         
            ->setFormatter('Format::ifEmpty', null),        
        Field::inst( 'esw_employees.note' )
            ->setFormatter('Format::ifEmpty', null)                     
                             
    )   

    ->leftJoin( 'person', 'person.user_id', '=', 'esw_employees.esw_id' )
    ->where( 'esw_employees.esw_id', $_POST['esw_id'] )
    
    ->where( "person.esw", 1, "=")
    ->where( "person.disabled", 0, "=")

    ->process($_POST)
    ->json();   

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer ✓

    person_esw_table.row( {selected: true } ).data().user_id );

    I think you should have:
    person_esw_table.row( {selected: true } ).data().person.user_id );

    And you probably will need to do the same with this code in your child table:

                        if ( selected.any() ) {
                            d.esw_id = selected.data().user_id;
                        }
    

    Change to:

                        if ( selected.any() ) {
                            d.esw_id = selected.data().person.user_id;
                        }
    

    Kevin

  • bpitonibpitoni Posts: 21Questions: 7Answers: 2

    Kevin, you are the best! Thank you!
    Any chance the code in the blog example could be changed to include the table names? Thank you again! Much appreciated!

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    The example in the blog post doesn't need table names since it doesn't use the table name in the Field::inst() constructor. Indeed, adding the table name would be wrong in that case.

    The structure of the data object reflects how the instance has been setup on the server-side, and thus might need to be customised a little to suit each use case, as you have seen.

    Allan

This discussion has been closed.