title: Refresh comments section
body: <p>I have put together a JQuery script that when entering a comment, it goes to a database and pulls the result back and displays it on the page. This works well, however I need a seperate page with just the comments on, which auto refreshes the results every 5 seconds (instead of clicking refresh on the browser). What I would also like is for the comments to FadeIn. I have tried to do this with resources I have found online, but most of them seem to keep replicating my content as well as refreshing.</p>
  
  <p>Can you help?
  <img src="https://i.stack.imgur.com/9pcAX.jpg" alt="enter image description here"></p>
  
  <p><strong>Comments.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="comments.css"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Live Comments&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="leaveComment"&gt;
    &lt;h2&gt;Leave a Comment&lt;/h2&gt;
    &lt;div class="row"&gt;
      &lt;label&gt;Your Name:&lt;/label&gt;
      &lt;input type="text"&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;label&gt;Comment:&lt;/label&gt;
      &lt;textarea cols="10" rows="5"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;button id="add"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="comments"&gt;
    &lt;h2&gt;Live Comments&lt;/h2&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="jquery-1.6.1.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
              $(function() {
  
                  //retrieve comments to display on page
                  $.getJSON("comments.php?jsoncallback=?", function(data) {
  
                      //loop through all items in the JSON array
                      for (var x = 0; x &lt; data.length; x++) {
  
                          //create a container for each comment
                          var div = $("&lt;div&gt;").addClass("row").appendTo("#comments");
  
                          //add author name and comment to container
                          $("&lt;label&gt;").text(data[x].name).appendTo(div);
                          $("&lt;div&gt;").addClass("comment").text(data[x].comment).appendTo(div);
                      }
                  }); 
                  //add click handler for button
                  $("#add").click(function() {
  
                      //define ajax config object
                      var ajaxOpts = {
                          type: "post",
                          url: "addComment.php",
                          data: "&amp;author=" + $("#leaveComment").find("input").val() + "&amp;comment=" + $("#leaveComment").find("textarea").val(),
                          success: function(data) {
  
                              //create a container for the new comment
                              var div = $("&lt;div&gt;").addClass("row").appendTo("#comments"); 
  
                              //add author name and comment to container
                              $("&lt;label&gt;").text($("#leaveComment").find("input").val()).appendTo(div);
                              $("&lt;div&gt;").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow");
  
                              //empty inputs
                              $("#leaveComment").find("input").val("");
                              $("#leaveComment").find("textarea").val("");
                          }
                      };
  
                      $.ajax(ajaxOpts);
  
                  });     
              });     
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Moderator.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="comments.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="comments"&gt;
    &lt;h2&gt;Live Comments&lt;/h2&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="jquery-1.6.1.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
              $(function() {
  
                  //retrieve comments to display on page
                  $.getJSON("comments.php?jsoncallback=?", function(data) {
  
                      //loop through all items in the JSON array
                      for (var x = 0; x &lt; data.length; x++) {
  
                          //create a container for each comment
                          var div = $("&lt;div&gt;").addClass("row").appendTo("#comments");
  
                          //add author name and comment to container
                          $("&lt;label&gt;").text(data[x].name).appendTo(div);
                          $("&lt;div&gt;").addClass("comment").text(data[x].comment).appendTo(div);
                      }
                  }); 
                  //add click handler for button
                  $("#add").click(function() {
  
                      //define ajax config object
                      var ajaxOpts = {
                          type: "post",
                          url: "addComment.php",
                          data: "&amp;author=" + $("#leaveComment").find("input").val() + "&amp;comment=" + $("#leaveComment").find("textarea").val(),
                          success: function(data) {
  
                              //create a container for the new comment
                              var div = $("&lt;div&gt;").addClass("row").appendTo("#comments"); 
  
                              //add author name and comment to container
                              $("&lt;label&gt;").text($("#leaveComment").find("input").val()).appendTo(div);
                              $("&lt;div&gt;").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow");
  
                              //empty inputs
                              $("#leaveComment").find("input").val("");
                              $("#leaveComment").find("textarea").val("");
                          }
                      };
  
                      $.ajax(ajaxOpts);
  
                  });     
              });     
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Comments.php</strong></p>
  
  <pre><code>&lt;?php
  
      //db connection detils
      $host = "localhost";
    $user = "CommentsDB";
    $password = "password";
    $database = "comments";
  
      //make connection
    $server = mysql_connect($host, $user, $password);
    $connection = mysql_select_db($database, $server);
  
      //query the database
    $query = mysql_query("SELECT * FROM comments");
  
      //loop through and return results
    for ($x = 0, $numrows = mysql_num_rows($query); $x &lt; $numrows; $x++) {
          $row = mysql_fetch_assoc($query);
  
          $comments[$x] = array("name" =&gt; $row["name"], "comment" =&gt; $row["comment"]);        
      }
  
      //echo JSON to page
      $response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")";
      echo $response;
  
  ?&gt;
  </code></pre>
  
  <p><strong>addComments.php</strong></p>
  
  <pre><code>&lt;?php
  
    //db connection detils
    $host = "localhost";
    $user = "CommentsDB";
    $password = "password";
    $database = "comments";
  
    //make connection
    $server = mysql_connect($host, $user, $password);
    $connection = mysql_select_db($database, $server);
  
    //get POST data
    $name = mysql_real_escape_string($_POST["author"]);
    $comment = mysql_real_escape_string($_POST["comment"]);
  
    //add new comment to database
    mysql_query("INSERT INTO comments VALUES(' $name ',' $comment ')");
  
  ?&gt;
  </code></pre>