Submit on blur unfocusses the next field

renevanh

I'm using (or better... trying to use) Datatables and jEditables to represent data and make it inline editable.
Most of the desired functions work just fine, only tabbing through the cells in a row is still not functioning correctly and I can't find a solution.

On doubleclick, a field becomes editable. When the TAB key is pressed, the field is blurred (triggering a submit action and a PHP script) and the next field is selected. This does work fine until the submit is completed. The previous field will be blurred but the cursor disappears from the new field, leaving the user only one option: click the field again to edit.

Below is the code used. When I replace all {onblur: 'submit',}, by just {}, it works fine, but won't trigger the submit action and thus will not save the changed input. To me it looks like the return of the submit action messes with the position of the cursor leaving it anywhere but in the new editable field. How do I get this working properly?

[code]
var category;
$(document).ready(function() {
oTable = $('#table').dataTable( {
"bProcessing": false,
/* We're actually doing client side sorting and triggering of events */
"bServerSide": false,
/* Width is decided in aoColumns */
"bAutoWidth": false,
/*
* Language file still hardcoded
* TODO: Set language file from user preferences
*/
"oLanguage": {
"sUrl": "<?php echo MERP_ROOT; ?>/Lang/Dutch/dataTables.dutch.txt"
},
"sAjaxSource": "category_content.php?id=" + category,
"aoColumns" : [
{
sName : 'chkAll',
sWidth: '3%',
bSortable : false,
/* Add a checkbox to every row */
fnRender : function(oObj) {
return '';
}
},
{
sName : 'Name',
sWidth: '25%',
},
{
sName : 'Amount',
sWidth: '15%',
},
{
sName : 'Price',
sWidth: '15%',
},
{
sName : 'Description',
sWidth: '30%',
},
{
sName : 'Location',
sWidth: '15%',
}
],
/* Toggle all checkboxes */
"fnInitComplete" : function ()
{
$('#chkAll').click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
});
}
/* Add jEditable */
}).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('td').dblclick();
return false;
}
});
[/code]

renevanh

Does nobody have any idea's, tips, hints about or experiences with this issue?
I'm totally stuck.

renevanh

I finally managed to get tabbing working the way I want.
Below is my code, a fully functional example of an editable datatable with working tabbing, including direct AJAX submit and selection of the next cell or second cell in the next row.
As can be seen, the first column contains checkboxes which are not editable and skipped when tabbing to the next row. There's 5 columns in this specific table but the code does not limit the number of columns. Could be 2, could be 2000.
Also included on the bottom my AJAX calls to add and delete a row after ticking the checkbox. This uses a small AJAX framework known as Zaxas.
Don't forget to include the fnReloadAjax plugin, you'll need it.

(The PHP variable MERP_ROOT is defined as the root of the website.)


[code]
/*************************************************/
/* Include Datatables fnReloadAjax plugin here!! */
/*************************************************/


var category;
var oTable;
var tabbed = false;

$(document).ready(function() {
oTable = $('#table').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td', nRow).addClass('edit');
},
"fnDrawCallback": function( oSettings ) {
$('.edit:not(".sorting_1")', oTable.fnGetNodes()).editable( '<?php echo MERP_ROOT ?>Materials/save_material_details.php', {
"onblur" : "submit",
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
/* Activate the next element or jump to first element on new line */
if (tabbed) {
if ( $(this).next('td').length == 1 ){
$(this).next('td').dblclick();
}
else if ( $('td', $(this.parentNode).next()).length > 0 ){
$('td:eq(1)', $(this.parentNode).next()).dblclick();
}
tabbed = false;
}
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
});
$('.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
/* Submit the current element */
tabbed = true;
$('input', this)[0].blur();
return false;
}
else {
tabbed = false;
}
});
},
"bProcessing": false,
/* We're actually doing client side sorting and triggering of events */
"bServerSide": false,
/* Width is decided in aoColumns */
"bAutoWidth": false,
"oLanguage": {
"sUrl": "<?php echo MERP_ROOT; ?>/Lang/Dutch/dataTables.dutch.txt"
},
"sAjaxSource": "<?php echo MERP_ROOT; ?>/Materials/category_content.php?id=" + category,
"aoColumns" : [
{
sName : 'chkAll',
sWidth: '3%',
bSortable : false,
/* Add a checkbox to every row */
fnRender : function(oObj) {
return '';
}
},
{
sName : 'Name',
sWidth: '25%',
},
{
sName : 'Amount',
sWidth: '15%',
},
{
sName : 'Price',
sWidth: '15%',
},
{
sName : 'Description',
sWidth: '30%',
},
{
sName : 'Location',
sWidth: '15%',
}
],
/* Toggle all checkboxes */
"fnInitComplete" : function ()
{
$('#chkAll').click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
});
}
});
});

function fnClickAddRow() {
var req = new ZaxasRequest();
req.getContent("<?php echo MERP_ROOT ?>Materials/edit_table.php?action=create&id=" + category, "feedback");
oTable.fnReloadAjax('category_content.php?id=' + category);
}

function fnClickDeleteRow() {
$('input:checked', oTable.fnGetNodes()).each(function(){
var article = $(this).closest('tr').attr('id');
var req = new ZaxasRequest();
req.getContent("<?php echo MERP_ROOT ?>Materials/edit_table.php?action=delete&id=" + article, "feedback");
oTable.fnReloadAjax('category_content.php?id=' + category);
});
}

[/code]