jEditable and Tabbing
jEditable and Tabbing
What is happening is when I tab out from a editable(input) , the selectbox in the next is displayed for just a moment and then reverts back. I need to click on the selectbox again to select it. Could you point me where is the issue - the tabbing logic or the way initializeEdits is called from "fnDrawCallBack" - I think something related to the latter. Please advise and thanks very much in advance.
P.S. This is all working fine for me except tabbing.
I have the initializeEdits function code called inside fnDrawCallback. I have also the tabbing code outside of intializeEdits.
[code]
"fnDrawCallback": function ( oSettings ){ intitializeEdits(this);}
[/code]
The initializeEdits function is below
[code]
function initializeEdits(oTable){
var customerID = $.Params.get('id');
var item = $.Params.get('item');
var source = $.Params.get('source');
$('td:eq(2)', oTable.fnGetNodes()).editable(function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var itemNumber = oTable.fnGetData( aPos[0], aPos[1] - 2 );
var nTds = $('td', this.parentNode);
var uomValue = oTable.fnGetData( aPos[0], aPos[1]+1 );
var previousValue = oTable.fnGetData( aPos[0], aPos[1] );
var recordid = oTable.fnGetData( aPos[0], aPos[1] + 5 );
oTable.fnUpdate( value, aPos[0], aPos[1]);
if( value.length != 0 && isDigitsOnly(value)) {
$(this.parentNode).removeClass('row_selected');
$(this.parentNode).addClass('row_saved');
var key = "";
var storeValue = "";
store(key, storeValue);
}
if( !isDigitsOnly(value) ){
oTable.fnUpdate( previousValue, aPos[0], aPos[1]);
return previousValue;
} else
return value;
}, {
"height": "20px",
"onblur" : "submit",
"tooltip": "Click to edit Last Qty...",
"indicator" : "Saving...",
"placeholder" : ""
});
$('td:eq(3)', oTable.fnGetNodes()).editable( function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var itemNumber = oTable.fnGetData( aPos[0], aPos[1] - 3 );
var nTds = $('td', this.parentNode);
var qtyValue = oTable.fnGetData( aPos[0], aPos[1] - 1 );
var previousValue = oTable.fnGetData( aPos[0], aPos[1] );
var recordid = oTable.fnGetData( aPos[0], aPos[1] + 4 );
oTable.fnUpdate( value, aPos[0], aPos[1]);
if( value.length != 0 && qtyValue.length != 0 && isDigitsOnly(qtyValue)){
$(this.parentNode).removeClass('row_selected');
$(this.parentNode).addClass('row_saved');
var key = "";
var storeValue = "";
store(key, storeValue);
}
return(value);
},
{
"type": "select",
"height": "20px",
"onblur" : "submit",
"tooltip": "Click to select a UOM...",
"indicator" : "Saving...",
"placeholder" : "",
"data": function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var previousValue = oTable.fnGetData( aPos[0], aPos[1]);
return "{'EA': 'EA', 'CS': 'CS', 'BX': 'BX', 'selected': '"+ previousValue + "'}";
}
});
}
[/code]
Now this is the tabbing code outside the fnDrawCallBack
[code]
$('#tableid tbody td').live('keydown', function (evt) {
if(evt.keyCode==9 && $('input', this).length > 0) {
/* Submit the current element */
$('input', this)[0].blur();
/* Activate the next element */
$(this).next().click();
return false;
}
} );
[/code]
Regards
Joson
P.S. This is all working fine for me except tabbing.
I have the initializeEdits function code called inside fnDrawCallback. I have also the tabbing code outside of intializeEdits.
[code]
"fnDrawCallback": function ( oSettings ){ intitializeEdits(this);}
[/code]
The initializeEdits function is below
[code]
function initializeEdits(oTable){
var customerID = $.Params.get('id');
var item = $.Params.get('item');
var source = $.Params.get('source');
$('td:eq(2)', oTable.fnGetNodes()).editable(function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var itemNumber = oTable.fnGetData( aPos[0], aPos[1] - 2 );
var nTds = $('td', this.parentNode);
var uomValue = oTable.fnGetData( aPos[0], aPos[1]+1 );
var previousValue = oTable.fnGetData( aPos[0], aPos[1] );
var recordid = oTable.fnGetData( aPos[0], aPos[1] + 5 );
oTable.fnUpdate( value, aPos[0], aPos[1]);
if( value.length != 0 && isDigitsOnly(value)) {
$(this.parentNode).removeClass('row_selected');
$(this.parentNode).addClass('row_saved');
var key = "";
var storeValue = "";
store(key, storeValue);
}
if( !isDigitsOnly(value) ){
oTable.fnUpdate( previousValue, aPos[0], aPos[1]);
return previousValue;
} else
return value;
}, {
"height": "20px",
"onblur" : "submit",
"tooltip": "Click to edit Last Qty...",
"indicator" : "Saving...",
"placeholder" : ""
});
$('td:eq(3)', oTable.fnGetNodes()).editable( function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var itemNumber = oTable.fnGetData( aPos[0], aPos[1] - 3 );
var nTds = $('td', this.parentNode);
var qtyValue = oTable.fnGetData( aPos[0], aPos[1] - 1 );
var previousValue = oTable.fnGetData( aPos[0], aPos[1] );
var recordid = oTable.fnGetData( aPos[0], aPos[1] + 4 );
oTable.fnUpdate( value, aPos[0], aPos[1]);
if( value.length != 0 && qtyValue.length != 0 && isDigitsOnly(qtyValue)){
$(this.parentNode).removeClass('row_selected');
$(this.parentNode).addClass('row_saved');
var key = "";
var storeValue = "";
store(key, storeValue);
}
return(value);
},
{
"type": "select",
"height": "20px",
"onblur" : "submit",
"tooltip": "Click to select a UOM...",
"indicator" : "Saving...",
"placeholder" : "",
"data": function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var previousValue = oTable.fnGetData( aPos[0], aPos[1]);
return "{'EA': 'EA', 'CS': 'CS', 'BX': 'BX', 'selected': '"+ previousValue + "'}";
}
});
}
[/code]
Now this is the tabbing code outside the fnDrawCallBack
[code]
$('#tableid tbody td').live('keydown', function (evt) {
if(evt.keyCode==9 && $('input', this).length > 0) {
/* Submit the current element */
$('input', this)[0].blur();
/* Activate the next element */
$(this).next().click();
return false;
}
} );
[/code]
Regards
Joson
This discussion has been closed.
Replies
from http://www.appelsiini.net/projects/jeditable
[quote]
Miscallenous options
Default action of when user clicks outside of editable area is to cancel edits. You can control this by setting onblur option. Possible values are:
onblur : cancel Clicking outside editable area cancels changes. Clicking submit button submits changes.
onblur : submit Clicking outside editable area submits changes.
onblur : ignore Click outside editable area is ignored. Pressing ESC cancels changes. Clicking submit button submits changes.
[/quote]
to change defaults in DataTables editable, see http://code.google.com/p/jquery-datatables-editable/wiki/CustomCellEditors
[code]
$(document).ready(function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "UpdateData.php",
"aoColumns": [
null,
{
},
{
indicator: 'Saving platforms...',
tooltip: 'Click to edit platforms',
type: 'textarea',
submit: 'Save changes',
onblur: 'ignore',
},
{
type: 'select',
onblur: 'cancel',
submit: 'Ok',
loadurl: 'EngineVersionList.php',
loadtype: 'GET'
},
{
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"
}
]
});
})
[/code]
Actually, onblur is working fine for me and if you notice, I am not sending the value to server immediately but storing in HTML5 local storage. That is the reason, I am using a custom function instead of the URL for jeditable. When I tab out onblur is submit and I can get the value and store it. The issue is next select is just getting displayed for one second and reverting back as a normal text in the tab out. If I click on that cell everything is okay. So trying to figure out why the tab is causing to come up and revert back immediately before user has a chance to make a selection from the select box.
Hope I did not confuse you :-)
Regards
Joson
Found and fixed the issue. The culprit is fnUpdate() function. I now pass false as two last parameters and now the select-box is acting cool. Now, one more thing I noted was I did not observe any difference in behavior when the last parameter is false or true. The important one was the fourth "false" parameter that prevents redraw. Thanks!
Regards
Joson
hehe.. sorry. too many lolcats