jEditable textarea

jwmonteith

I'm using jeditable with type 'textarea' and am finding the vertical size of the input area to be far too large. I have tried the 'height:' configuration parm, but no luck. Also made sure the input text data was trimmed of leading and trailing spaces, but again no luck. When the textarea cell is clicked, the input area expands vertically downward probably a full screen size or more. I would like to find a way to control the excessive height. Below is the code being used.

$('.edit_area').editable(function(value, settings) {
var origvalue = value;
var $this = $(this);
var parts = $this.attr("id").split("-");
var columnid = parts[parts.length-1];
parts[parts.length-1] = "ticket_tm_id";
parts[parts.length-2] = "key";
var keyval = ($("#"+parts.join("-")).text());
var newvalue = value + '^^^' + columnid + '^^^~~~' + keyval + '~~~';

//var workvar = 'value=' + value;
//alert(workvar);

updateDB(newvalue);
return(origvalue);
}, {
type : 'textarea',
cancel : 'cancel',
submit : 'submit',
height: '100',
//indicator : '',
tooltip : 'edit',
placeholder : '...'

}),

Jotape

[code]

$(".edit_area").editable("http://www.example.com/save.php", {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : "",
tooltip : 'Click to edit...'
});

text: {
element:function(settings,original) {
var input=$('');
if(settings.width!='none') {
input.width(settings.width);
}
if(settings.height!='none') {
input.height(settings.height);
}
input.attr('autocomplete','off');
$(this).append(input);
return(input);
}
},

[/code]

jwmonteith

Thank you for the code snippet. I inserted the code into my program and tested, but the problem persists. The height of the input for the textarea remains too large. Below is the code.

$('.edit_area').editable(function(value, settings) {
var origvalue = value;
var $this = $(this);
var parts = $this.attr("id").split("-");
var columnid = parts[parts.length-1];
parts[parts.length-1] = "ticket_tm_id";
parts[parts.length-2] = "key";
var keyval = ($("#"+parts.join("-")).text());
var newvalue = value + '^^^' + columnid + '^^^~~~' + keyval + '~~~';

//var workvar = 'value=' + value;
//alert(workvar);

updateDB(newvalue);
return(origvalue);
}, {
type : 'textarea',
cancel : 'cancel',
submit : 'submit',
text: {
element:function(settings,original) {
var input=$('');
if(settings.width!='none') {
input.width(settings.width);
}
if(settings.height!='none') {
input.height(settings.height);
}
input.attr('autocomplete','off');
$(this).append(input);
return(input);
}
},
//indicator : '',
tooltip : 'edit',
placeholder : '...'
}),

jwmonteith

I added a height and width setting. The setting for width does seem to have a effect, but no matter what value is placed for height, nothing changes. The height remains excessive. I tried 25, 10, 1, even negative numbers -10 and -100, but no dice.

jwmonteith

Further testing has determined that the height and width work when the type is changed to text. I take back what I said about width working with textarea. I don't think so now. The problem is I really need a textarea for long paragraphs. There is no wrapping of text in type : 'text'. So how do I get control of height and width of a textarea?
Furthermore, I'm not sure what the text : setting is used for. The code attached to it does not appear to be executing.

See my code below...

$('.edit_area').editable(function(value, settings) {
var origvalue = value;
var $this = $(this);
var parts = $this.attr("id").split("-");
var columnid = parts[parts.length-1];
parts[parts.length-1] = "ticket_tm_id";
parts[parts.length-2] = "key";
parts[parts.length-4] = "k";
var keyval = ($("#"+parts.join("-")).text());
var newvalue = value + '^^^' + columnid + '^^^~~~' + keyval + '~~~';

//var workvar = 'value=' + value;
//alert(workvar);

updateDB(newvalue);
return(origvalue);
},
{
type : 'text',
cancel : 'cancel',
submit : 'submit',
height : '50',
width : '200',
text : {
element:function(settings,original) {
var input=$('');

alert('made it to special routine');

if(settings.width!='none') {
input.width(settings.width);
}
if(settings.height!='none') {

alert('made it to height');

input.height(settings.height);
}
input.attr('autocomplete','off');
$(this).append(input);
return(input);
}
},
//indicator : '',
tooltip : 'edit for textarea',
placeholder : '...'
}),

allan

If you use Firebug, where are sizes coming from? Is it a stylesheet, or are the sizing applied directly to the element? It sounds like it might be one for the jEditable folks, rather than a DataTables issue.

Allan

jwmonteith

Thanks Allan. I believe it was an issue with jEditable where the sizing is being applied directly to the element. Interestingly enough, a couple of days ago I decided to download another copy of the jEditable code just to see if that would make a difference. The code I was using I had downloaded maybe 4-6 weeks earlier. I also wanted to know the version. In both the existing and newly downloaded copy, the version was stated as 1.7.1. But there was a small difference in the file sizes. I implemented the new jEditiable code and tried my program again. This time the problem did not exist. It appears the sizing is being recognized and editing in a textarea is much better with no excessive height. So problem solved.

allan

Thanks for the update :-). I've updated my local copy of jEditable from 1.6.2 (which is what was in the DataTables packages) to 1.7.1 - which will be in the next DataTables package.

Allan