always shown checkbox not updating underlying database table

Datagaard

I have a dataTable with an always shown checkbox that when changed doesn't update the underlying database table. I have followed the "Always Shown checkbox" example, but I must have missed something.

I can make the change in the Editor okay, but not from within the dataTable.

Code:

<?php

/*
 * Editor server script for DB table TeleMedApplications
 * 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\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'TeleMedApplications', 'ApplicationID' )
    ->fields(
        Field::inst( 'TeleMedApplications.ApplicationID' )->set(false),
        Field::inst( 'TeleMedApplications.ApplicationName' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'TeleMedApplications.ApplicationTypeID' )
            ->options( 'TeleMedApplicationTypes','ApplicationTypeID', 'ApplicationTypeDesc')
            ->validator( 'Validate::dbValues' ),
        Field::inst( 'TeleMedApplicationTypes.ApplicationTypeDesc' ),
        Field::inst( 'TeleMedApplications.Notes' ),
        Field::inst( 'TeleMedApplications.Inactive' )
            ->setFormatter(function ($val, $data, $opts) {
                return ! $val ? 0 : 1;          
            })
    )
    ->leftJoin( 'TeleMedApplicationTypes', 'TeleMedApplicationTypes.ApplicationTypeID', '=', 'TeleMedApplications.ApplicationTypeID' )
    ->process( $_POST )
    ->json();
?>

Js:

/*
 * Editor client script for DB table TeleMedApplications
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.TeleMedApplications.php',
        table: '#TeleMedApplications',
        fields: [
            {
                "label": "Application ID:",
                "name": "TeleMedApplications.ApplicationID"
            },
            {
                "label": "Name:",
                "name": "TeleMedApplications.ApplicationName"
            },
            {
                "label": "Application Type ID:",
                "name": "TeleMedApplications.ApplicationTypeID",
                "type": "select"
            },
            {
                "label": "Notes:",
                "name": "TeleMedApplications.Notes",
                "type": "textarea"
            },
            {
                "label": "Inactive:",
                "name": "TeleMedApplications.Inactive",
                "type": "checkbox",
                "separator": "|",
                "options": [
                    { label: '', value: 1}
                ]
            }
        ]
    } );

    var table = $('#TeleMedApplications').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.TeleMedApplications.php',
        columns: [
            { "data": "TeleMedApplications.ApplicationID" },
            { "data": "TeleMedApplications.ApplicationName" },
            { 
                "data": "TeleMedApplicationTypes.ApplicationTypeDesc"
            },
            { "data": "TeleMedApplications.Notes" },
            {
                "data": "TeleMedApplications.Inactive",
                "render": function (data, type, row){
                    if (type === 'display'){
                        return '<input type="checkbox" class="editor-active">';             
                    }
                    return data;                
                },
                "className": "dt-body-center"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:not(:last-child)' // no row selection on last column      
        },
        lengthChange: false,
        responsive: true,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ],
      rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.TeleMedApplications.Inactive == 1 );
      }
    } );
    
    $('#example').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'TeleMedApplications.Inactive', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
    } );
} );

}(jQuery));

Html:

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables Editor - TeleMedApplications</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.3/moment-2.13.0/dt-1.10.12/b-1.2.2/b-print-1.2.2/r-2.1.0/se-1.2.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
                
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.3/moment-2.13.0/dt-1.10.12/b-1.2.2/b-print-1.2.2/r-2.1.0/se-1.2.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.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/table.TeleMedApplications.js"></script>
    </head>
    <body class="dataTables">
        <div class="container">

            <h1>
                DataTables Editor <span>TeleMedApplications</span>
            </h1>
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="TeleMedApplications" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Application Type ID</th>
                        <th>Notes</th>
                        <th>Inactive</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

Datagaard

Why is always when you post a comment, you find the answer. The onchange event did not reference the correct table id.

Doh!

allan

Thanks for posting back - good to hear you've got it working!

Allan