title: Change height of a textarea after ajax success function
body: <p>There is a textarea in my code used to show the message responded from the backend. And I want to increase the height automatically when the length of contents is so long that appearing a scrollbar. here is my code:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      async: false,
      url: '/text_translation',
      data: JSON.stringify(data),
      success: function(returnStr) {
          $.each(returnStr,function(item, value) {
              returnString.html(returnString.html() + value + '\n');//show message
          });
  
          console.log(returnString.clientHeight);//undefined
  
          //if message too long, increase the height 
          if (returnString.clientHeight &lt; returnString.scrollHeight) {
              returnString.css('height', 'auto').css('height', returnString.scrollHeight + (returnString.offsetHeight - returnString.clientHeight));    
          }
  
  }
  </code></pre>
  
  <p>At first, because ajax is asynchronous, I set the "async" as "false" to ensure the change can be executed after the each function, but it also can't work. I tried to print the clientHeight, it showed "undefined" no matter async was false or true. Doesn't setting false mean that the statement I'm calling has to complete before the next statement in my function can be called? I've been confused to the result, which was a specific number I thought.</p>
  
  <p>And then I tried to use the "input" event function like this:</p>
  
  <pre><code>returnString.on('input',function() {
      if (this.clientHeight &lt; thhis.scrollHeight) {
          $(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
      }
  });
  </code></pre>
  
  <p>Nothing changed.</p>
  
  <p>I must do something wrong, but I don't know where is it. Please tell me the reason, thanks for your answer first.</p>