Why won't my page read and write check box values to my database.

StanR · October 2018

My page reads a lot of data from my database when I bring it up. But it doesn't read and write the values of my check boxes. (This worked at one time.) Does anyone see an error in this code?

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/checkbox.php",
        "table": "#example",
        "fields": [ {
                label:     "Active:",
                name:      "active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }, {
                label: "Category:",
                name:  "category"
            }, {
                label: "Test:",
                name:  "test"
            }, {
                label: "Automated:",
                name:  "automated"
            }, {
                label: "Request/Response:",
                name:  "request_response"
            }
        ]
    } );

    $('#example').DataTable( {
        order:[],
        dom: "Bfrtip",
        ajax: "../php/checkbox.php",
        columns: [
            { data: "category" },
            { data: "test" },
            { data: "automated" },
            { data: "request_response" },
/*          { data: "explanation" },  */
            {
                data:   "active",
                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
        },
        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.active == 1 );
        }
    } );

    $('#example').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
    } );
} );

    </script>
</head>
<body>
<h1>Editor example <span>Always shown checkbox</span></h1>
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Test</th>
                        <th>Automated</th>
                        <th>Request/Response</th>
<!--                        <th>Explanation</th>  -->
                        <th>Active</th>
                    </tr>
                </thead>
            </table>
</body>
</html>

StanR · October 2018

Sorry. I put in the wrong page

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<style type="text/css" class="init">

body {font-family: Arial;}

td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}

</style>

/* Formatting function for row details - modify as you need */
function format ( d ) {
console.log(d);
// d is the original data object for the row
return '

'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '

Explanation:	'+d.explanation+'
Groovydoc:	'+d.groovydoc+'
Source Code for Class:	'+d.source_code+'
Example of Use:	'+d.use_case+'

';
}

var editor;

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "../php/checkbox.php",
"table": "#example",
"fields": [ {
label: "Active:",
name: "active",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}, {
label: "Category:",
name: "category"
}, {
label: "Test:",
name: "test"
}, {
label: "Automated:",
name: "automated"
}
]
} );

var table = $('#example').DataTable( {
    "dom": "Bfrtip",
    "ajax": "../php/checkbox.php",
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "category" },
        { "data": "test" },
        { "data": "automated" },
        { "data": "request_response" },

/* { "data": "explanation" },
{ "data": "groovydoc" },
{ "data": "source_code" },
{ "data": "use_case" }, */
{
data: "active",
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
},
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.active == 1 );
},
"order": []
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    console.log('click event');
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

} );

</script>

</head>
<body class="wide comments example">

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Category</th>
            <th>Test</th>
            <th>Automated</th>
            <th>Request/Response</th>
            <th>Active</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Category</th>
            <th>Test</th>
            <th>Automated</th>
            <th>Request/Response</th>
            <th>Active</th>
        </tr>
    </tfoot>
</table>

</body>
</html>

StanR · October 2018

Was using Chrome. With IE, I can read check-box values, but not write them.

StanR · October 2018

I apologize. I had a cut-and-paste error.

Left out the lines:

$('#example').on( 'change', 'input.editor-active', function () {
    editor
        .edit( $(this).closest('tr'), false )
        .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
} );

colin · October 2018

Hi @StanR ,

There's a lot going on there, and a lot of updates! When you say it worked at one time, but not now, what changed? Also, how doesn't it work - does it give an error on the client, or server? Would you be able to link to the page, or create a test case that would demonstrate the problem?

Cheers,

Colin

StanR · October 2018

Colin, I didn't make it clear in my last message that this problem is fixed. I had left out several lines inadverently:(

colin · October 2018

Ah gotcha, I thought that was meant for me, you'd left out the lines for us Glad all fixed!

Why won't my page read and write check box values to my database.

Why won't my page read and write check box values to my database.

Replies

Howdy, Stranger!

Categories

DataTables

Why won't my page read and write check box values to my database.

Why won't my page read and write check box values to my database.

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables