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?
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?
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 '<input type="checkbox" value="" />'; } }, { 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; } });