Parent / Child Editing not returning value from selected row
Parent / Child Editing not returning value from selected row
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
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:
Change to:
Kevin
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!
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