Problem using Datables with jeditable, tab button, and selects / inputs
Problem using Datables with jeditable, tab button, and selects / inputs
alongtheivy
Posts: 21Questions: 1Answers: 0
I have a datatable created and working fine. I wanted to add the ability to tab to editable fields and enter values, press tab again, and it moves to the next one, and so on.
I have the tabbing working, but it won't let me edit the value. I can tab tab tab through all the fields, but if I try to stop and either select a value from a dropdown in the field or type in a text freeform field, it won't let me, and i have to actually click on the field to edit it. I wanted to get my datatables to a point where you don't have to use a mouse. Here is my code:
$('#table .select').bind('keydown', function(evt) {
if(evt.keyCode==9) {
console.log("next");
var nextBox='';
var currentBoxIndex=$("#table .select").index(this);
console.log("currentBoxIndex",currentBoxIndex);
if (currentBoxIndex == ($("#table .select").length-1)) {
nextBox=$("#table .select:first"); //last box, go to first
console.log("nextBox", nextBox);
} else {
nextBox=$("#table .select").eq(currentBoxIndex+1); //Next box in line
console.log("nextBox", nextBox);
}
$(this).find("#table .select").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
You can also view my question on stackoverflow. http://stackoverflow.com/questions/24935069/using-tabbing-in-jeditable-fields-in-datatables
Please let me know if you know a solution to this issue...I feel like I'm pretty close - tabbing works! Just not editing the fields that are tabbed over...
Thanks.
P.S. can someone please tell me how to format code on this site? I rarely post so I forget and it's not on the page when posting a question :(