Tab between columns not working

klingler

Good afternoon

I've set up an editable table with the options from this example: https://editor.datatables.net/examples/inline-editing/tabControl.html

When I click in a cell and then press the tab key the cell is still selected but the focus is then on the "back" button at the table bottom.

What I don't see in the example is following snippet to activate inline editing:

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

Without it as in the example, I can't activate inline editing at all...

klingler

A difference might be, that I change the AJAX URL for the table with:

    function editrows(orderid, supplier)
    {
            var table = $('#example').DataTable();
            table.ajax.url( '/inc/json.items.php?orderid=' + orderid).load();
            editor.s.ajax = '/inc/json.items.php?orderid=' + orderid;
            $('#actualorder').html('Aktueller Warenkorb: ' + supplier);
            $('#orderitems').css("display", "block");
            console.log(editor.s.ajax);
    }

The table is initially empty and loaded via a click from another table....
Inline editing works normally...just not tabbing through...

kthorngren

The example works here:
http://live.datatables.net/guwafemu/38/edit

Please update the example to show the issue you are having.

Kevin

klingler

Hmm...should this example work with an external JSON source and AJAX?

I see it loads the JSON but no rows are displayed....

http://live.datatables.net/guwafemu/39/edit

kthorngren

Take a look at the browser's console and you will see this error:
Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

I used idSrc and rowId, as described in the technote, to configure a row identifier. See updated example:
http://live.datatables.net/guwafemu/40/edit

Kevin

klingler

No chance here...

When for example I remove the ajax source from the editor definition as in your example...no POST is sent when editing a row...

Still no inline editing enabled....only works when adding this code:

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

klingler

Aaah... (o;

Missed those two lines:

<link href="https://nightly.datatables.net/keytable/css/keyTable.dataTables.css?_=ad96c22f9d8971a682bb57b5b94f91ff.css" rel="stylesheet" type="text/css" />

Wasn't aware they were needed even for enabling inline editing as well...