Cascading Lists with Left Join Issues
Cascading Lists with Left Join Issues
I have been trying to duplicate the example that is in datatables editor but I am having no luck. I ran the example scripts to set up the country, continent and team tables. I am able to read all of the data that is in the team table and I can see all of the data in the drop down lists. The problem I am having is that I the drop down list will not update to sort the correct country for the selected continent. It simply just keeps showing all of the countries as I select a continent. My javascript code is as follows.
<!DOCTYPE html>
<html>
<h2>New Raw Material Purchase</h2>
<head><p>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>New Orders View</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="../../examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../../examples/resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="../../examples/resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: 'data',
table: "#example",
fields: [ {
label: "Name:",
name: "team.name"
}, {
label: "Continent:",
name: "team.continent",
type: "select"
}, {
label: "Country:",
name: "team.country",
type: "select"
}
]
} );
editor.dependent('team.continent','countries.php');
$('#example').DataTable( {
dom: "Bfrtip",
ajax: {
url: 'data.php',
type: 'POST'
},
columns: [
{ data: "team.name" },
{ data: "continent.name" },
{ data: "country.name" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Continent</th>
<th>Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Continent</th>
<th>Country</th>
</tr>
</tfoot>
</table>
I have two server script files as shown below.
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../lib_batch_module/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, 'team' )
->field(
Field::inst( 'team.name' ),
Field::inst( 'team.continent' )
->options( Options::inst()
->table( 'continent' )
->value( 'id' )
->label( 'name' )
),
Field::inst( 'continent.name' ),
Field::inst( 'team.country' )
->options( Options::inst()
->table( 'country' )
->value( 'id' )
->label( 'name' )
),
Field::inst( 'country.name' )
)
->leftJoin( 'continent', 'continent.id', '=', 'team.continent' )
->leftJoin( 'country', 'country.id', '=', 'team.country' )
->process($_POST)
->json();
<?php
include_once( $_SERVER['DOCUMENT_ROOT']."../lib_batch_module/DataTables.php" );
$countries = $db
->select( 'country', ['id as value', 'name as label'], ['continent' => $_REQUEST['values']['continent']] )
->fetchAll();
echo json_encode( [
'options' => [
'country' => $countries
]
] );
I think but I am not completely sure that my problem is that my second script file is not being initiated to send any data to the javascript. When I run the html page i get one error.
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
This question has accepted answers - jump to:
Answers
Use the browser's Network inspector tool to watch for XHR requests. When you open or change the continent field do you see an XHR request to fetch the countries?
Kevin
You might need to change
'country' => $countriesto'team.country' => $countriesin line 12. Use the network inspector in this example to see what is returned when opening the editor form or changing the continent.Kevin
I finally got this to work. The answer is in the following response from Allen.
https://datatables.net/forums/discussion/comment/200811/#Comment_200811