Editor KeyTable integration documentation change suggestions
Editor KeyTable integration documentation change suggestions
I am picking up enough JS to do some reasonable troubleshooting of my own, in no small part thanks to Allan's help with DataTables.
I just went through the KeyTable/Editor integration documentation here: http://editor.datatables.net/tutorials/keytable
I'd like to suggest 2 changes:
1) Mention joined table columns end with ".id" (or whatever the JSON uses, but the docs use ID).
For example, the call to the showField function, if it's being used, looks like:
[code]showField(editor, keys, 'oneToOneColumnName.id');[/code] or
[code]showField(editor, keys, 'oneToManyColumnName[].id');[/code]
This isn't that unexpected -- the .update call in "fnInitComplete" used to populate the form values is the same, but this wasn't fresh in my mind and to me was not immediately obvious.
This applies to the "Creating a form using the API" tutorial as well.
2) The code used to handle the Enter and Escape keys never did work for me:
[code]$(window).bind('keydown', function (e) {
if ( e.keyCode === 13 ) {
// On return, submit the form
editor.submit();
}
else if ( e.keyCode === 27 ) {
// On escape, close the form
editor.close();
}
} );[/code]
No event ever fired, no matter the key I pressed. Maybe a bug of mine, maybe not, but the jQuery docs for ".bind" (http://api.jquery.com/bind/) suggest that .on() is now the preferred means of binding events, so I suggest something like the following, which worked for me:
[code]$("body").on("keypress",function(e){
if(e.keyCode === 13) {
// On return, submit the form
editor.submit();
}
else if(e.keyCode === 27) {
// On escape, close the form
editor.close();
}
});[/code]
I just went through the KeyTable/Editor integration documentation here: http://editor.datatables.net/tutorials/keytable
I'd like to suggest 2 changes:
1) Mention joined table columns end with ".id" (or whatever the JSON uses, but the docs use ID).
For example, the call to the showField function, if it's being used, looks like:
[code]showField(editor, keys, 'oneToOneColumnName.id');[/code] or
[code]showField(editor, keys, 'oneToManyColumnName[].id');[/code]
This isn't that unexpected -- the .update call in "fnInitComplete" used to populate the form values is the same, but this wasn't fresh in my mind and to me was not immediately obvious.
This applies to the "Creating a form using the API" tutorial as well.
2) The code used to handle the Enter and Escape keys never did work for me:
[code]$(window).bind('keydown', function (e) {
if ( e.keyCode === 13 ) {
// On return, submit the form
editor.submit();
}
else if ( e.keyCode === 27 ) {
// On escape, close the form
editor.close();
}
} );[/code]
No event ever fired, no matter the key I pressed. Maybe a bug of mine, maybe not, but the jQuery docs for ".bind" (http://api.jquery.com/bind/) suggest that .on() is now the preferred means of binding events, so I suggest something like the following, which worked for me:
[code]$("body").on("keypress",function(e){
if(e.keyCode === 13) {
// On return, submit the form
editor.submit();
}
else if(e.keyCode === 27) {
// On escape, close the form
editor.close();
}
});[/code]
This discussion has been closed.
Replies
regarding point 2 - you are absolutely right the `on` method in jQuery is preferred now and the DataTables documentation is all going to be updated as part of the work on v1.10 to reflect this. The reason the code from the tutorial page won't have worked is that Firefox doesn't fire key events quite the same way as Webkit / IE and I forgot to test that page in Firefox. It should have been listening for `keyup` - it now does and works in all major browsers. I've updated it to use `on` there as well. Thanks for pointing this out!
Regards,
Allan