Unable to activate inline editing for my DataTable Editor.

boicenet

The attached code works well for displaying database information and allows the user to select a single field and use an Edit button to Update data. I'm trying to enable inline editing for just the "Billed" cell/field and am unable to do so. I used examples at the DataTables site for help, but am apparently missing something. I had to attach a text file which lists code from two files as I was unable to submit this post due to too many characters in the body of the question.

Anyone notice anything I'm missing?

Thank you.

kthorngren

My guess would be that you are invoking the listener before adding the class to the column:

            $('#job_table').on( 'click', 'tbody td.editable', function (e) {
                editor.inline( this );
            } );
 
 
 
            var jobTable = $('#job_table').DataTable( {
//              "iDisplayLength": 6,
                "pageLength": 12,
                dom: "Bfrtip",
                ajax: "jobsBilled.php",
                columns: [
                    { data: "jobs.job_number" },
                    { data: "jobs.billed", className: 'editable' },
                    { data: "jobs.job_name" },
                    { data: "jobs.due_date" },

You probably will need to move the event listener after the DT init. You might need to put it in initComplete to make sure its run after the class has been assigned. It seems this would work but I've always specified the columns that are enabled or disabled.

Kevin

allan

That shouldn't actually matter in this case since the tbody td.editable is part of the delegate target. As long as those elements exist when clicked and #job_table exists when that line is run it should work okay.

I actually don't see why that isn't working.

Are there any errors shown in the console with you click?

Allan

boicenet

Kevin, thank you for your assistance and suggestions. I tried moving the event listener into initComplete, but still no luck. I suspect it's something else I'm overlooking.

boicenet

I had a feeling it was something easy and overlooked by me. I forgot to change the name of the editor variable from editor to jobEditor. I copied & pasted code, but forgot to make my edits.

Thank you Kevin and Allan for your replies.

            $('#job_table').on( 'click', 'tbody td.editable', function (e) {
                editor.inline( this );
            } );

Should actually be... I changed 'editor.inline( this );' TO 'jobEditor.inline( this );'

            $('#job_table').on( 'click', 'tbody td.editable', function (e) {
                jobEditor.inline( this );
            } );

allan

Gah. Well found. Good to hear you've got it working now.

Allan