Can't add inline editing

clambert1273 · June 2022

Now that I figured out the generator and adding where clause, I decided to use the simple html generated page to test adding in a simple inline editing based on the examples; however, when I put in the code for the simple inline editing, I just keep getting the reinitialising error: DataTables warning: table id=membersalelist - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I understand what it means, I do not understand how to fix it so I can actually test this piece and if I can't produce a working test, then I am not going to add it to the site itself. I'm just very confused at this point as it seemed simple enough to follow the example but apparently not.

kthorngren · June 2022

Its hard to say what the problem is without seeing it. Just guessing you have $('#example').DataTable() in your code to get an instance of the Datatable API which is executing before you initialize the Datatable. Maybe you can post your JS code so we can see if there is anything obvious. Otherwise will will need a link to your page or a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can start with this Editor base test case:
http://live.datatables.net/guwafemu/178/edit

Kevin

clambert1273 · June 2022

I read too quickly.. I can paste the code. I literally copied / pasted from example editing for my specific information. So what bothers me, if I copy from example and get the error why isn't the example throwing one lol

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

        <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/cr-1.5.6/date-1.1.2/fh-3.2.3/sl-1.4.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.bootstrap5.min.css">
        
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/cr-1.5.6/date-1.1.2/fh-3.2.3/sl-1.4.0/datatables.min.js"></script>
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js'></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.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.bootstrap5.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.membersalelist.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: "php/table.membersalelist.php",
        table: "#membersalelist",
        fields: [ {
                label: "StatusID:",
                name: "StatusID"
            }, {
                label: "AAA_ID:",
                name: "AAA_ID"
            }, {
                label: "LastName:",
                name: "LastName"
            }, {
                label: "DaysNeeded:",
                name: "DaysNeeded"
            }, {
                label: "MinimumDesired:",
                name: "MinimumDesired"
            }, {
                label: "ContactEmail:",
                name: "ContactEmail",
            }, {
                label: "Active:",
                name: "Active"
            }, {
                label: "Confirmed:",
                name: "Confirmed"
            }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#membersalelist').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#membersalelist').DataTable( {
        dom: "Bfrtip",
        ajax: "php/table.membersalelist.php",
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "StatusID" },
            { data: "AAA_ID" },
            { data: "LastName" },
            { data: "DaysNeeded" },
            { data: "MinimumDesired" },
            { data: "ContactEmail" },
            { data: "Active" },
            { data: "Confirmed" }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );



    </script>
    </head>
    <body class="bootstrap5">
        <div class="container">

            <h1>
                DataTables Editor <span>membersalelist</span>
            </h1>
            
            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="membersalelist" width="100%">
                <thead>
                    <tr>
                        <th>StatusID</th>
                        <th>AAA_ID</th>
                        <th>LastName</th>
                        <th>DaysNeeded</th>
                        <th>MinimumDesired</th>
                        <th>ContactEmail</th>
                        <th>Active</th>
                        <th>Confirmed</th>
                    </tr>
                </thead>
            </table>

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

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · June 2022

The above code looks ok. Is there a Datatable initialization in js/table.membersalelist.js?

Kevin

clambert1273 · June 2022

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

(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.membersalelist.php',
table: '#membersalelist',
fields: [
{
"label": "StatusID:",
"name": "StatusID"
},
{
"label": "AAA_ID:",
"name": "AAA_ID"
},
{
"label": "LastName:",
"name": "LastName"
},
{
"label": "DaysNeeded:",
"name": "DaysNeeded"
},
{
"label": "MinimumDesired:",
"name": "MinimumDesired"
},
{
"label": "ContactEmail:",
"name": "ContactEmail"
},
{
"label": "Active:",
"name": "Active"
},
{
"label": "Confirmed:",
"name": "Confirmed"
}
]
} );

var table = $('#membersalelist').DataTable( {
    ajax: 'php/table.membersalelist.php',
    columns: [
        {
            "data": "StatusID"
        },
        {
            "data": "AAA_ID"
        },
        {
            "data": "LastName"
        },
        {
            "data": "DaysNeeded"
        },
        {
            "data": "MinimumDesired"
        },
        {
            "data": "ContactEmail"
        },
        {
            "data": "Active"
        },
        {
            "data": "Confirmed"
        }
    ],
    select: true,
    lengthChange: false
} );

new $.fn.dataTable.Buttons( table, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
] );

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

} );

}(jQuery));

kthorngren · June 2022

Thats the problem. You have two datatable initialization statements where you can only have one. Looks like the two are essentially the same except the code in your second post uses the select checkbox. In addition you have two sets of Editor initialization. Only the last one executed will be used. You can decide which to use but the only code you need to add to use inline editing is this to enable it:

    // Activate an inline edit on click of a table cell
    $('#membersalelist').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

Kevin

clambert1273 · June 2022

thank you @kthorngren I would have NEVER figured that out lol

clambert1273 · June 2022

new problems now, After your suggestion and THEN also the example from https://editor.datatables.net/examples/inline-editing/serverSide.html

just throws All of this:

datatables.min.js:14 jQuery.Deferred exception: Cannot read properties of undefined (reading 'style') TypeError: Cannot read properties of undefined (reading 'style')
    at db (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:101:39)
    at Aa (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:86:237)
    at f (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:135:112)
    at HTMLTableElement.<anonymous> (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:135:198)
    at Function.each (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:14:3003)
    at S.fn.init.each (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:14:1481)
    at S.fn.init.u [as dataTable] (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:125:187)
    at S.fn.init.l.fn.DataTable (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:215:482)
    at HTMLDocument.<anonymous> (http://localhost/editor/leader/js/table.membersalelist.js:56:35)
    at e (https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js:14:30038) undefined
S.Deferred.exceptionHook @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
ready @ datatables.min.js:14
B @ datatables.min.js:14
datatables.min.js:101 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at db (datatables.min.js:101:39)
    at Aa (datatables.min.js:86:237)
    at f (datatables.min.js:135:112)
    at HTMLTableElement.<anonymous> (datatables.min.js:135:198)
    at Function.each (datatables.min.js:14:3003)
    at S.fn.init.each (datatables.min.js:14:1481)
    at S.fn.init.u [as dataTable] (datatables.min.js:125:187)
    at S.fn.init.l.fn.DataTable (datatables.min.js:215:482)
    at HTMLDocument.<anonymous> (table.membersalelist.js:56:35)
    at e (datatables.min.js:14:30038)
db @ datatables.min.js:101
Aa @ datatables.min.js:86
f @ datatables.min.js:135
(anonymous) @ datatables.min.js:135
each @ datatables.min.js:14
each @ datatables.min.js:14
u @ datatables.min.js:125
l.fn.DataTable @ datatables.min.js:215
(anonymous) @ table.membersalelist.js:56
e @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
S.readyException @ datatables.min.js:14
(anonymous) @ datatables.min.js:14
e @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
ready @ datatables.min.js:14
B @ datatables.min.js:14

after searching here for some resolution, all I found was possibly table data columns different than table headers; however, all mine are equal at 8 columns and line up so I am stumped again.

allan · June 2022

Can you give me a link to your page so I can debug it? If that isn't possible, can you show me your latest Javascript and HTML.

Thanks,
Allan

clambert1273 · June 2022

@allan sure thing, here is my latest code

javascript


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

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.membersalelist.php',
        table: '#membersalelist',
        fields: [
            {
                "label": "StatusID:",
                "name": "StatusID"
            },
            {
                "label": "AAA_ID:",
                "name": "AAA_ID"
            },
            {
                "label": "LastName:",
                "name": "LastName"
            },
            {
                "label": "DaysNeeded:",
                "name": "DaysNeeded"
            },
            {
                "label": "MinimumDesired:",
                "name": "MinimumDesired"
            },
            {
                "label": "ContactEmail:",
                "name": "ContactEmail"
            },
            {
                "label": "Active:",
                "name": "Active"
            },
            {
                "label": "Confirmed:",
                "name": "Confirmed"
            }
        ]
    } );

// Activate an inline edit on click of a table cell
    $('#membersalelist').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( table.cell( this ).index(), {
            onBlur: 'submit'
        } );
    } );

    var table = $('#membersalelist').DataTable( {dom: 'Bfrtip',
        ajax: {
            url: 'php/table.membersalelist.php',
            type: 'POST'
        },
        serverSide: true,
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false,
                searchable: false
            },
            {
                "data": "StatusID"
            },
            
            {
                "data": "AAA_ID"
            },
            {
                "data": "LastName"
            },
            {
                "data": "DaysNeeded"
            },
            {
                "data": "MinimumDesired"
            },
            {
                "data": "ContactEmail"
            },
            {
                "data": "Active"
            },
            {
                "data": "Confirmed"
            }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
        } );
} );
}(jQuery));

html

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

        <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.bootstrap5.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js"></script>
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.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.bootstrap5.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.membersalelist.js"></script>
    </head>
    <body class="bootstrap5">
        <div class="container">

            <h1>
                DataTables Editor <span>membersalelist</span>
            </h1>
            
            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="membersalelist" width="100%">
                <thead>
                    <tr>
                        <th>StatusID</th>
                        <th>AAA_ID</th>
                        <th>LastName</th>
                        <th>DaysNeeded</th>
                        <th>MinimumDesired</th>
                        <th>ContactEmail</th>
                        <th>Active</th>
                        <th>Confirmed</th>
                    </tr>
                </thead>
            </table>

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

allan · June 2022

You've got 8 columns defined in your HTML and 9 in the columns array for the Javascript. That is what is causing the error. Perhaps add <th></th> as the first column in the header.

Allan

Can't add inline editing

Can't add inline editing

Replies

Howdy, Stranger!

Categories

DataTables

Can't add inline editing

Can't add inline editing

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables