jEditable and tabbing

renevanh

After some searching and a lot of trial & error I finally managed to complete my code.
This code includes the option to 'tab' to the next td field and edit it for fast editing of data.

However, it doesn't quite work yet.
Pressing tab does trigger the update event (runs the php script that's defined in sUpdateURL) and does focus on the next field, but the cursor is not there. Therefor, another click is needed to edit the data.

It seems like cursors jumps to the next td before the update script is completed. Somehow the completion of the script triggers a focus elsewhere making my cursor disappear.

Any thoughts on how to solve this?

[code]
var category; //Defined elsewhere

$(document).ready(function() {
oTable = $('#table').dataTable( {
"bProcessing": false,
"bServerSide": false,
"bAutoWidth": false,
"sAjaxSource": "category_content.php?id=" + category,
"aoColumns" : [
{
"sName" : 'chkAll',
"sWidth": '3%',
"bSortable" : false,
"fnRender" : function(oObj) {
return '';
}
},
{
"sName": "Name",
"sWidth": "25%",
},//Name
{
"sName": "Amount",
"sWidth": "15%",
},//Amount
{
"sName": "Price",
"sWidth": "15%",
},//Price
{
"sName": "Description",
"sWidth": "30%",
},//Description
{
"sName": "Location",
"sWidth": "15%",
}//Location
],
"fnInitComplete" : function ()
{
$('#chkAll').click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
});
}
}).makeEditable({
"sUpdateURL": "<?php echo MERP_ROOT ?>Materials/save_material_details.php",
"aoColumns" : [

{},
{onblur: 'submit',},
{onblur: 'submit',},
{onblur: 'submit',},
{onblur: 'submit',},
{onblur: 'submit',},
]
});
});

$('#table tbody td').live('keydown', function (event) {
if(event.keyCode==9 && $('input', this).length > 0) {
/* Submit the current element */
$('input', this)[0].blur();
/* Activate the next element */
$(this).next().dblclick();
return false;
}
});
[/code]