Tab to next cell with datatables editable
Tab to next cell with datatables editable
There are a number of threads about tabbing to the next cell just using datatable and jeditable. However I am using the datatables.editable plugin and having a few problems getting the tabbing working.
Here's my code so far (the editable table is already setup).
[code]
$('#mytable tbody').on('keydown', 'input,select,textarea', function(e){
// If tab key
if(e.keyCode == 9) {
e.preventDefault();
e.stopPropagation()
oInput = $(this);
// Function to find next editable cell in row
function fnNextInput(oTds) {
// Loop through cells
oTds.each(function(){
// Get column position of cell
iColPos = oTable.fnGetPosition(this)[1];
// If cell is editable then click and focus on input
if (options.columnEditSettings[iColPos] != null) { // NOTE: options.colu... is my own object that I am passing to makeEditable()
$(this).click().find('input,select,textarea').focus();
return false;
}
// If end of row, go to next row
if(iColPos == options.columnEditSettings.length -1) {
fnNextInput($(this).closest('tr').next().children());
return false;
}
});
}
// Call fnNextInput with all the cells in the row to the right of the current cell
fnNextInput(oInput.closest('td').nextAll());
}
});
[/code]
I've got it mostly working except for a few things:-
1. options.columnEditSettings is my own object that I pass to the makeEditable plugin not from inside the makeEditable plugin. I'd like to be able to extract from makeEditiable a bit like I can with oTable.fnSettings() - this would make it much easier for someone else to use this bit of code (or turn this into a plugin/example for makeEditable??)
2. The .focus() for focusing on the next input once the cell has been clicked and the cell has been 'made editable' works for a split second but looses focus again almost instantly?
3. I am using onblur : "submit", however if I randomly click around the whole table quite a few of the inputs are left unsubmitted
Any Help much appreaciated
Here's my code so far (the editable table is already setup).
[code]
$('#mytable tbody').on('keydown', 'input,select,textarea', function(e){
// If tab key
if(e.keyCode == 9) {
e.preventDefault();
e.stopPropagation()
oInput = $(this);
// Function to find next editable cell in row
function fnNextInput(oTds) {
// Loop through cells
oTds.each(function(){
// Get column position of cell
iColPos = oTable.fnGetPosition(this)[1];
// If cell is editable then click and focus on input
if (options.columnEditSettings[iColPos] != null) { // NOTE: options.colu... is my own object that I am passing to makeEditable()
$(this).click().find('input,select,textarea').focus();
return false;
}
// If end of row, go to next row
if(iColPos == options.columnEditSettings.length -1) {
fnNextInput($(this).closest('tr').next().children());
return false;
}
});
}
// Call fnNextInput with all the cells in the row to the right of the current cell
fnNextInput(oInput.closest('td').nextAll());
}
});
[/code]
I've got it mostly working except for a few things:-
1. options.columnEditSettings is my own object that I pass to the makeEditable plugin not from inside the makeEditable plugin. I'd like to be able to extract from makeEditiable a bit like I can with oTable.fnSettings() - this would make it much easier for someone else to use this bit of code (or turn this into a plugin/example for makeEditable??)
2. The .focus() for focusing on the next input once the cell has been clicked and the cell has been 'made editable' works for a split second but looses focus again almost instantly?
3. I am using onblur : "submit", however if I randomly click around the whole table quite a few of the inputs are left unsubmitted
Any Help much appreaciated
This discussion has been closed.
Replies
1. Looking at the plug-ins code, it does a fairly good job of making its internal variables privately scoped, so if you want to be able to access something like the settings object, it would need an API method added to the code (I'm sure its perfectly possible to do!). It looks like it would be nice to have an API method that will tell you information about a cell - read/write, type etc.
2. I suspect that your event is running before the plug-ins handler - thus it is overriding your new focus. Try changing your 'keydown' to 'keyup' - if that isn't enough then you'll need to wrap your call to fnNextInput into a setTimeout - for example:
[code]
setTimeout( function () {
fnNextInput(oInput.closest('td').nextAll());
}, 0 );
[/code]
The alternative is a callback function or an event trigger to be added to the editable plug-in.
3. It sounds like it be cancelling Ajax requests - if you have a look at the Network tab in Chrome/Safari or Firebug's console, do you see any information about the requests being cancelled?
Thanks,
Allan
2. I can't do keyup unfortunately because preventdefault doesn't work on keyup because the event is triggered on keydown. I've tried doing a setTimeout works a treat! thanks!
3. There isn't any cancelled requests. The reason it was doing this was because for some reason sometime when I clicked on a cell it wasn't given focus so then when I clicked on another cell it didn't blur - which is what triggers the submit. I got round this by hacking jeditable and putting a setTimeout function around the following line:-
[code]$(':input:visible:enabled:first', form).focus();[/code]
So I've got it 99% working now. The only issue now is that for some reason when I used a checkbox input type it doesn't submit or dissapear on blur... Basically nothing happens at all, I have even tried:-
[code]
$("input[type='checkbox']").on('change',function(){
$(this).submit();
});
[/code]
It's as if jeditable creates the checkbox, but doesn't bind any events to it at all so it just sits there...
Sorry for the delay in getting back to you - great to hear you got it sorted!
Allan
Is there a way to get a more complete explanation on what was changed to replace return with tab?
Thanks,
Axl