Cascading Lists with Left Join Issues

Cascading Lists with Left Join Issues

nutrabatchnutrabatch Posts: 2Questions: 1Answers: 1

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: '../../nutrabatch/raw_material_purchase_data_input_fields.php',
        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','../../nutrabatch/countries.php');

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
        url:    '../../nutrabatch/raw_material_purchase_data_input_fields.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

  • kthorngrenkthorngren Posts: 16,799Questions: 25Answers: 3,982

    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

  • kthorngrenkthorngren Posts: 16,799Questions: 25Answers: 3,982
    Answer ✓

    You might need to change 'country' => $countries to 'team.country' => $countries in line 12. Use the network inspector in this example to see what is returned when opening the editor form or changing the continent.

    Kevin

  • nutrabatchnutrabatch Posts: 2Questions: 1Answers: 1
    Answer ✓

    I finally got this to work. The answer is in the following response from Allen.

    https://datatables.net/forums/discussion/comment/200811/#Comment_200811

Sign In or Register to comment.