Parent Child not quite working
Parent Child not quite working
Riddley_Walker
Posts: 15Questions: 2Answers: 0
I'm still having trouble figuring out parent child editor grids. I think I'm close to getting this one to work, but it just isn't quite there yet. I keep going round in circles. You can view it here: http://themoviechef.com/RecipeBrowser.php
I've tried to modify your example. In my case there is a parent child Recipe with a primary key of id and a field name of "recipename". The child file RecipeStep has a primary key of id and a field called recipeid (which should relate back to the id of the recipe) and another field called recipestepnumber. When you click on a recipe, you should see all the steps from the child record in the bottom table.
The top table should just have the recipename; the bottom table recipestepnumber and recipe (in a drop down like in your example).
I'm getting the error: "DataTables warning: table id=RecipeSteps - An SQL error occurred: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'recipename' in 'field list'", and that is correct, there is not column recipename in that table, but that is supposed to be coming from the .js in the same way that "site" comes in as a drop down list in your example.
Maybe my join is not written correctly? I would appreciate any help, to say the least.
Code follows:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Editor - Recipes</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap4.min.js"></script>
S
<script>
/*
* Editor client script for DB table Recipes
* Created by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
var recipesEditor = new $.fn.dataTable.Editor( {
ajax: 'php/table.Recipes.php',
table: '#Recipes',
fields: [
{
"label": "recipename:",
"name": "recipename"
}
]
} );
var recipesTable = $('#Recipes').DataTable( {
ajax: 'php/table.Recipes.php',
columns: [
{
"data": "recipename"
}
],
select: true,
lengthChange: false
} );
new $.fn.dataTable.Buttons( recipesTable, [
{ extend: "create", editor: recipesEditor },
{ extend: "edit", editor: recipesEditor },
{ extend: "remove", editor: recipesEditor }
] );
recipesTable.buttons().container()
.appendTo( $('.col-md-6:eq(0)', recipesTable.table().container() ) );
var recipestepsEditor = new $.fn.dataTable.Editor( {
ajax: {
url: 'php/table.sites3.php',
data: function ( d ) {
var selected = recipesTable.row( { selected: true } );//this is where we send the the id value from the row that was selected in the parent table
if ( selected.any() ) {
d.id = selected.data().id;
}
}
},
table: '#RecipeSteps',
fields: [ {
label: "Recipe Step Number:",
name: "RecipeSteps.recipestepnumber"
}, {
label: "Recipe:",
name: "RecipeSteps.id",
type: "select",
placeholder: "Select a recipe"
}
]
} );
var recipestepsTable = $('#RecipeSteps').DataTable( {
dom: 'Bfrtip',
ajax: {
url: 'php/table.sites3.php',
type: 'post',
data: function ( d ) {
var selected = recipesTable.row( { selected: true } );
if ( selected.any() ) {
d.id = selected.data().id;
}
}
},
columns: [
{ data: 'RecipeSteps.recipestepnumber' },
{ data: 'Recipe.recipename' }
],
select: true,
buttons: [
{ extend: 'create', editor: recipestepsEditor },
{ extend: 'edit', editor: recipestepsEditor },
{ extend: 'remove', editor: recipestepsEditor }
]
} );
recipesTable.on( 'select', function () {
recipestepsTable.ajax.reload();
recipestepsEditor
.field( 'RecipeSteps.id' )
.def( recipesTable.row( { selected: true } ).data().id );
} );
recipesTable.on( 'deselect', function () {
recipestepsTable.ajax.reload();
} );
recipestepsEditor.on( 'submitSuccess', function () {
recipesTableajax.reload();
} );
recipesEditor.on( 'submitSuccess', function () {
recipestepsTable.ajax.reload();
} );
} );
}(jQuery));
</script>
</head>
<body class="bootstrap4">
<div class="container">
<h1>
DataTables Editor <span>Recipes</span>
</h1>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="Recipes" width="100%">
<thead>
<tr>
<th>recipename</th>
</tr>
</thead>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="RecipeSteps" width="100%">
<thead>
<tr>
</th><th>RecipeStepNumber</th><th>RecipeName</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
The helper php program:
<?php
/*
* Editor server script for DB table sites
* Created by http://editor.datatables.net/generator
*/
// DataTables PHP library and database connection
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, 'RecipeSteps' )
->fields(
Field::inst( 'recipeid' )->set( false ),
Field::inst( 'recipename' )->validator( 'Validate::notEmpty' )
)
->join(
Mjoin::inst( 'RecipeSteps' )
->link( 'Recipes.recipeid', 'RecipeSteps.id' )
->fields(
Field::inst( 'recipeid' )
)
)
->process( $_POST )
->json();
Thanks in advance
Answers
Sorry...realized I gave the wrong URL above. It should be http://74.124.214.194/~themoviechef/RecipeBrowser.php
Use:
if the primary key is not called
id. The PHP libraries assume the pkey is called id by default.Allan
Thank you. Made that correction and now get DataTables warning: table id=RecipeSteps - An SQL error occurred: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'recipename' in 'field list'
Can you change:
to:
And then use the debugger to upload a trace once you reload the page. If you then give me the debug code I'll be able to see what SQL it is executing.
Allan