getting KeyTable and jEditable to play nicely
getting KeyTable and jEditable to play nicely
I have trouble getting jEditable and KeyTables to play well.
On pushing enter, it allows you to edit, but the actual arrow keys still stay active, which then allows you to also enter another field. I need the focus to stay on the field being edited.
My code:
[code]
var oTable;
$(document).ready( function () {
var oTable;
/* Init DataTables */
oTable = $('#example').dataTable();
/* TableToolsInit.sSwfPath = "dataTables-1.6/media/swf/ZeroClipboard.swf"; */
/* Apply the jEditable handlers to the table */
$('#example tbody td').editable( 'catch_data', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Map KeyTable reference */
var keys = new KeyTable( {
"table": document.getElementById('example')
} );
/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
/* Block KeyTable from performing any events while jEditable is in edit mode */
keys.block = true;
/* Initialise the Editable instance for this table */
$(nCell).editable( function (sVal) {
/* Submit function (local only) - unblock KeyTable */
keys.block = false;
return sVal;
}, {
"onblur": 'submit',
"onreset": function(){
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
* it will 'esc' KeyTable as well
*/
setTimeout( function () {keys.block = false;}, 0);
}
} );
/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
setTimeout( function () { $(nCell).click(); }, 0 );
} );
/* You might need to set the sSwfPath! Something like:
*/
} );
Name
Login name
Email
Created at
Moises
clare82
chauncey@hane.uk
2010-01-28 11:43:55 UTC
Emil
beau37
robyn.mante@dicki.ca
2010-01-28 11:43:55 UTC
Marco
malvina93
teagan@padberg.name
2010-01-28 11:43:56 UTC
etc[/code]
Any help appreciated.
On pushing enter, it allows you to edit, but the actual arrow keys still stay active, which then allows you to also enter another field. I need the focus to stay on the field being edited.
My code:
[code]
var oTable;
$(document).ready( function () {
var oTable;
/* Init DataTables */
oTable = $('#example').dataTable();
/* TableToolsInit.sSwfPath = "dataTables-1.6/media/swf/ZeroClipboard.swf"; */
/* Apply the jEditable handlers to the table */
$('#example tbody td').editable( 'catch_data', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Map KeyTable reference */
var keys = new KeyTable( {
"table": document.getElementById('example')
} );
/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
/* Block KeyTable from performing any events while jEditable is in edit mode */
keys.block = true;
/* Initialise the Editable instance for this table */
$(nCell).editable( function (sVal) {
/* Submit function (local only) - unblock KeyTable */
keys.block = false;
return sVal;
}, {
"onblur": 'submit',
"onreset": function(){
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
* it will 'esc' KeyTable as well
*/
setTimeout( function () {keys.block = false;}, 0);
}
} );
/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
setTimeout( function () { $(nCell).click(); }, 0 );
} );
/* You might need to set the sSwfPath! Something like:
*/
} );
Name
Login name
Created at
Moises
clare82
chauncey@hane.uk
2010-01-28 11:43:55 UTC
Emil
beau37
robyn.mante@dicki.ca
2010-01-28 11:43:55 UTC
Marco
malvina93
teagan@padberg.name
2010-01-28 11:43:56 UTC
etc[/code]
Any help appreciated.
This discussion has been closed.
Replies
Thank you for your understanding.
Allan
I donated yesterday (we had brief comms via email and you suggested the forum instead).
I'm not in that much of a hurry to receive an answer.
Are you using the latest version of KeyTable, and have you seen this example ( http://datatables.net/release-datatables/extras/KeyTable/editing.html ) for editing a table with KeyTables. If you disable DataTables and just use KeyTable does that help? I'm not seeing the problem you've noted when using the demo with Safari 4.
Allan
It would seems that I get the same response from KeyTable when DataTables are disabled.
The problem is:
If you edit but don't press enter, you can navigate to another field (cell) but have the other one stay open.
Now that I know it is KeyTable, I'll browse around and see what I can find in the source. Firefox 3.5.6 btw.
I've just tried the KeyTable demo page I linked before on Safari 4 Mac, Firefox 3.6 Mac, FIrefox 3.5 Win and IE8 Win - and I'm unable to replicate the problem. If I press enter to edit the cell, the arrow keys have no effect on the focus cell of KeyTable. Perhaps you could post a link to a page showing the problem? Can you see it on my demo page?
Can you also confirm that you are using the latest version of KeyTable: http://datatables.net/plug-ins/#extras_keytable
Regards,
Allan