I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.

autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);

Here is a piece of my source code: - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.

jQuery Code:

 $(document).ready(function(){
  window.jQuery.fn.autosize=function(){ return autosize(this); };
 });

 $('.edit4').each(function(){
   $(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
   $(this).autosize();
 });

Thank you!

I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.

autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);

Here is a piece of my source code: http://pastebin.com/049UfkGv - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.

jQuery Code:

 $(document).ready(function(){
  window.jQuery.fn.autosize=function(){ return autosize(this); };
 });

 $('.edit4').each(function(){
   $(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
   $(this).autosize();
 });

Thank you!

• javascript
• jquery
• autosize

4 Answers 4

you can use it as follows:

autosize.update($('textarea'));

In my case the Autosize jQuery plugin could not calculate the right height, because the textarea was hidden on pageload.

The following tigger helped me out:

function showMyTextarea(){

  // do your stuff here

  // trigger autosize     
  $('textarea').trigger('autosize.resize');

}

In my case I had to update the size of textarea not only based on changed content (this is handled by "autosize" plugin itself nicely) but based on CSS properties change as well, e.g. when user is using a slider to change the font-size of the textarea.

This worked for me:

// ... slider ui init bla bla
slide: function(){
  var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');

  // .. changing the actual css property 

  // triggering the .autosize
  $textarea.trigger('autosize.resizeIncludeStyle');

  // ... etc etc
}
// ...

This is not properly described in the Autosize Documentation but the event does exist and is handled in the jQuery version of the plugin.

Autosize creates a custom event, that can be triggered manually like this:

$("thextarea").trigger("autosize");