getting KeyTable and jEditable to play nicely

toblakai

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.

allan

I've just deleted your comment in the "how are you using DataTables" thread as it was not appropriate to post it there, nor was it appropriate to post the same question twice. The community will endeavour to answer your question as and when we can. If you wish to prompt a faster response I suggest either a donation to the DataTables cause ( http://datatables.net/donate ) or paying for commercial support.

Thank you for your understanding.
Allan

toblakai

Hi 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.

allan

Indeed we did :-). My apologies. The forum name didn't translate in my head to our discussion yesterday.

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

toblakai

Thanks for the reply.

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.

allan

Hi toblakai,

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