Place the cursor/caret at the end of makeeditable textarea after updating the column from the server

ldopson

[quote]This solution is used to grab the column data from the server and put it in the textarea and place the cursor to the end of the text, I also paste the date in.

I've gotten a lot from this forum so I though I would give back. I spent a considerable amount of hours figuring this out and here is the code, I have tested it with the following browsers:

FF 7.0.1
Chrome 14.0.835.202
Safari 5.1.1 (7534.51.22)
IE 9.0.8112

You will recognize the following as a makeeditable row definition:[/quote]
[code]
{name: 'Notes', indicator: 'Notes...', tooltip: 'Click to select Notes',
cancel: 'cancel', submit:'Change', height: "10px", width:"40px", type: 'textarea', //13
"onedit": function(obj) {
//colname is ID
var ID = oTable.fnGetData(oTable.fnGetPosition( this )[0])[jQuery.getIndexOfColumn('ID')];
jQuery(this).focusin(function () { // this is the KEY to making this work
that = this; // context changes to the callback from rowDataReady
jQuery(this).unbind(); //only needed once so unbind
var myReturnval = new jQuery.rowDataReady("novalue", function () {
jQuery(that).find("input[type=text], textarea").val(this.val).scrollTop(9999);
}, that);
//null is where sNewSource would go
oTable.fnMyReloadAjax(ID, 13, null, myReturnval);
});
}
}
[/code]

[quote]You can simply use the place the cursor routine like this (without server update)[/quote]
[code]
"onedit": function(obj) {
//grabs the data from the TD, useful for stripping out Divs, etc,
//this occurs before the FORM appears
var mytext = jQuery(this).text();
// this is the KEY to making this work
jQuery(this).focusin(function () {
jQuery(this).unbind(); //only needed once so unbind
//scrollTop needed for IE
jQuery(this).find("input[type=text], textarea").val(mytext).scrollTop(9999);
});
},
[/code]
[quote]" var ID = oTable.fnGetData(oTable.fnGetPosition( this )[0])[jQuery.getIndexOfColumn('ID')]; "[/quote]

[code]
//get the index of the given column
jQuery.getIndexOfColumn = function(colName) {
var idx = -1;
jQuery.each(oTable.fnSettings().aoColumns, function(index, col) {
if ($(col['nTh']).text() == colName) {
idx = index;
}
});
return(idx)
}
[/code]

[quote]***** The focus is attained by the focusin binding of the form which is embedded in the table cell
This uses the iD from the getIndexOfColumn and the colum (hardcoded) to make a call to the server
I'm not providing the server code here but I'm assuming you can get that part working on your own.

" oTable.fnMyReloadAjax(ID, 13, null, myReturnval); //null is where sNewSource would go "

The ajax call routine to get a single row of data from the server and set the colum data in the rowDataReady instance
[/quote]
[code]
jQuery.fn.dataTableExt.oApi.fnMyReloadAjax = function ( oSettings, id, col, sNewSource, myReturnval) {
if ( typeof id != 'undefined' && id != null ) {
// alert("id is " + id.toString());
} else {
alert("No ID returning");
return;
}
if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
oSettings.sAjaxSource = sNewSource;
modAjax = sNewSource + "?sSearch=%7Bid%3D" + id +"%7D";
} else {
modAjax = oSettings.sAjaxSource + "?sSearch=%7Bid%3D" + id +"%7D";
}
oSettings.fnServerData(modAjax, [], function(json) {
if( json.aaData.length ) {
var mydate = jQuery.mygetDate("MON_DAY");
if ( typeof json.aaData[0][col] == null || json.aaData[0][col] == null) {
myReturnval.SetValue(mydate);
} else {
myReturnval.SetValue(json.aaData[0][col] + "\n" + mydate);
}
} else {
alert("server error no data");
}
}, oSettings,myReturnval);
}

//------
// This allows an AJAX call to register a routine to wait for the data
// General purpose wait routine
//------
jQuery.rowDataReady = function (initVal, onChange, that) {
this.val = initVal; //Value to be stored in this object
this.onChange = onChange; //OnChange handler
//This method returns stored value
this.GetValue = function() {
return this.val;
}
//This method changes the value and calls the given handler
this.SetValue = function(value) {
this.val = value;
this.onChange();
}
}

//Simple data frunction (mysql format requirement), you can ignore this
jQuery.mygetDate = function(dformat) {
var dt = new Date();
var dd = dt.getDate();
var mm = dt.getMonth()+1;
var y = dt.getFullYear();
var H = dt.getHours();
var M = dt.getMinutes();
var S = dt.getSeconds();

var m = "0" + mm;
m = m.substring(m.length-2, m.length);

var d= "0" + dd;
d = d.substring(d.length-2, d.length);

var mydate = "";

switch (dformat) {
case "MON_DAY":
mydate = m + '/' + d + ': ';
break;
case "MD":
mydate = m + '/' + d;
break;
case "MDY":
mydate = m + '/' + d + '/' + y;
break;
case "E_YMD":
mydate = y + '-' + m + '-' + d;
break;
case "MDYHM":
mydate = m+'/'+d+'/'+y+' '+H+':'+M;
break;
case "MDYHMS":
mydate = m+'/'+d+'/'+y+' '+H+':'+M+':'+S;
break;
default:
alert("getDate format error: " + dformat);
};


return mydate;
}

[/code]