title: ajax comments show on submit w / out page refresh
body: <p>I wrote the beginnings of a very simple comment system.  It uses jQuery / AJAX / PHP MySQL.  So far it works fine.  But, once a comment is submitted you have to refresh the page to show the comment.  How can it show on submit.</p>
  
  <p>I hope this isn't too much code here, but here it is in three parts.  The jQuery / the php insert comment query / the php select comments query.</p>
  
  <p>jQuery / AJAX:</p>
  
  <pre><code>$(document).ready(function() {
    $('#button').click(function() {
      var name = $('#name').val();
      var comment = $('#comment').val();
  
      if(name == '' || comment == '') {
          $('#comment_messages').html('Please enter both fields');
      } else if(name !== '' || comment !== '') {
          $('#comment_messages').html('');
  
      $.ajax({
      type: 'POST',
      url: 'comments.php',
      data: 'name='+name+'&amp;comment='+comment,
      success: function(data) {
      $('#comments_area').append(data);
      }
      });
      }
    });
  });
  </code></pre>
  
  <p>PHP INSERT (to insert comments):</p>
  
  <pre><code>&lt;?php
  
  include('init.inc.php');
  
  if(isset($_POST['name'], $_POST['comment'])) {
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    if(!empty($name) &amp;&amp; !empty($comment)) {
      $query = mysql_query("INSERT INTO comments VALUES(NULL, '$name', '$comment', CURRENT_TIMESTAMP)");
      if($query === true) {
  
        // right here is what is being returned to success: function(data) in the ajax script.  What's the best way to return the comment here? 
  
      } else {
        echo 'Hmmm... that\'s odd........';
      }
    } else {
      echo 'Please enter both fields';
    }
  }
  
  ?&gt;
  </code></pre>
  
  <p>PHP SELECT (to retrieve comments):</p>
  
  <pre><code>&lt;?php
  
  $query = mysql_query("SELECT * FROM comments ORDER BY time DESC LIMIT 10");
  
    $num = mysql_num_rows($query);
    if($num &gt;= 1) {
      while($fetch = mysql_fetch_assoc($query)) {
        $name = $fetch['name'];
        $comment = $fetch['comment'];
        $time = $fetch['time'];
  
        ?&gt;
  
          &lt;div id="user_comments"&gt;
  
            &lt;?php echo $name; ?&gt; said at: &lt;span id="time_stamp"&gt;&lt;?php echo $time; ?&gt;&lt;/span&gt;&lt;p&gt;- &lt;?php echo $comment; ?&gt;
  
          &lt;/div&gt;
  
        &lt;?php
  
      }
  }
  
  ?&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Added two lines at bottom:</p>
  
  <pre><code>$(document).ready(function() {
    $('#button').click(function() {
      var name = $('#name').val();
      var comment = $('#comment').val();
  
      if(name == '' || comment == '') {
          $('#comment_messages').html('Please enter both fields');
      } else if(name !== '' || comment !== '') {
          $('#comment_messages').html('');
  
      $.ajax({
      type: 'POST',
      url: 'comments.php',
      data: 'name='+name+'&amp;comment='+comment,
      success: function(data) {
      $('#comments_area').append('&lt;b&gt;'+name+'&lt;/b&gt;&lt;p&gt;- '+comment);
      $('#comment_messages').html(data);
      }
      });
      }
    });
  });
  </code></pre>