Question

I’ve tried
http://www.technoreply.com/autogrow-textarea-plugin-version-2-0/
and
https://gist.github.com/802204#file_live_sample.js

TextArea’s autogrow, and they work great if you add items with the keyboard, but if you add items programmatically (say 1 new item each second) they do not autogrow.

Anyone know how or where I can find an autogro textarea that will autogrow if I add new items programmatically?
(for example with $(‘#txtUDSMessagesNotHandled’).val($(‘#textarea’).val()+’new text + ‘\n’);

Thanks in advance. Guillermo.

Answer 1

In live-sample.js, we see this:

$('.js-auto-grow').live('keyup keydown change', function(evt) {

So the plugin is binding to three events. The one you care about is change. The thing is, when you say $('#x').val('pancakes'), the change event is not triggered. Play around with this:

http://jsfiddle.net/ambiguous/FPB4q/1/

and you’ll see. Or, from the fine manual:

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

When you simply call $x.val('pancakes'), there is no focus change happening so no change event is triggered.

All you need to do is trigger the event yourself:

$('#txtUDSMessagesNotHandled')
    .val($('#textarea').val()+'new text + '\n')
    .change();

and then it should work fine.

Also note that the plugin requires that the <textarea> have both row and column attributes or it won’t work. Here’s a demo of it working:

http://jsfiddle.net/ambiguous/Sr5gm/