title: Reload div content with jQuery
body: <p>This is my code:</p>
  
  <pre><code>&lt;div style="overflow-x: hidden; overflow-y: visible; height:300px; width:300px;" id="textDiv"&gt;
  &lt;?php
  $query = mysql_query("SELECT * FROM posts ORDER BY id");
  while($queryVar = mysql_fetch_assoc($query))
  {
      echo $queryVar['id'].". ".$queryVar['text']."&lt;br&gt;";
  }
  ?&gt;
  &lt;/div&gt;
  &lt;div id="postComment"&gt;
  &lt;textarea id="text" onKeyPress="if(window.event.keyCode==13) postComment()"     cols="30" rows="1" style="border: solid 1px #888;"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function postComment()
  {
  var textVar = document.getElementById('text').value;
  $("#text").val("");
  $.ajax
  ({
      type: "GET",
      url: "controllers/sendCommentController.php",
      data: 'text=' + textVar,
      success: function(msg)
      {
          $("#textDiv").hide().fadeIn('fast');
      }
  })
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see when you hit enter in the textarea, sendCommentController.php executes (a simple mysql insert query). I want my textDiv to be reloaded with its content. .load() didn't really work or I just messed up, it loads another textDiv div into my existing one... Please help :( In addition, how should I make the div's scrollbar always positioned bottom? It won't really work with .load either. :(</p>