catch the ENTER key in a cell

x14841003

Hello

Using datatable in an offline mode (no server side processing) to write an order entry php page, I would like to be able to catch the event when someone enters an article code in a cell so that i can use that cell content to issue an AJAX query (for example to retrieve the article designation).
Can someone advise one on how to catch the ENTER key after having entered the article code ? any example code is welcome.
Thanks so much
x1484

kthorngren

Here is a very simple example of getting the value of a changed input:
http://live.datatables.net/renoziri/4/edit

Not sure if this is what you are looking for. If not it might be easier to update the test case with what you have and what you want to get.

Kevin

x14841003

Hi

Thanks so much.

I have another small question, I have set the TAB key to navigate between cells, it works fine (using the keys:[9]).

But i would like the same behaviour with the ENTER key.

The same behaviour as Excel, when you press ENTER in a cell you go to the 2nd column in the same row.

Thanks again for your help !
x1484

x14841003

Hi again

In fact in 2015 Allan wrote this

https://datatables.net/forums/discussion/31333/using-both-tab-and-enter-button-for-inline-editor-to-move-to-the-next-editable-cell

"Currently no - it will just retain focus on the current cell. There is no option in KeyTable to have enter advance to the next cell at the moment - a change would need to be made in the KeyTable library for that to happen."

Has that been implemented since then ?

Thanks, Bye
x1484

colin

Hi @x14841003 ,

I assume you're using Editor as you referenced it in that link. There hasn't been a change to KeyTable, but this thread here shows a way of implementing in the postSubmit handler.

Hope that helps,

Cheers,

Colin

x14841003

Hi Colin

Thanks for your help.

Yes i'm using DT Editor.

I've tried that workaround and unfortunately I cannot make it working.

I have created a DT Editor with 3 columns : article_id, description and a price.
1st column is of editable, 2nd is not, 3rd is editable.

When the user enters an article code in the 1st column, he press enter and an ajax call is made to retrieve the description from the database and then the cursor should "jump" to the 3rd column to enter the quantity.

Is this achievable using DT Editor ?

If you have an example, that would save me.

Thanks a lot, Bye
x1484

colin

Hi @x14841003 ,

This here is doing what you want, I believe. When the first column has been edited, the third column automatically gets inline edited.

Can you let me know if that does the trick, please.

Cheers,

Colin

x14841003

Hi Colin

Thanks a zillion times ! that's exactly what i was looking for !

But there still something, if the 1st column's cell content does not change and get inlined, if I press ENTER in the inline edit box it does not jump to the 3rd column.

But your example is nevertheless extremely nice...

Thanks a lot
x1484

x14841003

Hi again

In fact it jumps to the 3rd column if you click on the 1st column's cell for the first time and press ENTER without changing the cell's content.

But the 2nd time you click on it (making the inline editing appearing) and press ENTER, it does not jump to the 3rd column.

Looks like a browser caching issue i guess...

Thanks
x1484

colin

Hi @x14841003 ,

But there still something, if the 1st column's cell content does not change and get inlined, if I press ENTER in the inline edit box it does not jump to the 3rd column.

This is because the field didn't change, so it wasn't submitted. You could either change that in the form-options to be {submit: 'all'}, see here, or you could change the preSubmit to be preClose (since it wouldn't be submitted by default).

Hope that helps!

Cheers,

Colin

x14841003

Hi Colin

I could finally make it working. Thanks a zillion times for that !

In fact when i added {submit: 'all'}, it never worked as in http://live.datatables.net/jejuwuzi/3/edit

I had to replace that line :

editor.on( 'closed', function () {

By:

editor.on( 'close', function () {

And everything worked fine...

Thanks again for your help !! Bye
x1484