[JS] AJAX Comment System - Printable Version

PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Fun st00f</title>
  <script type="text/Javascript">
 
   // Can be used to dynamically create comment box - just like facebook
   // must be configured/fixed yourself
   function showCommentBox(status_id) { 
    var status = document.getElementById("status"); 
    var boxdiv = document.createElement("div");
    var posterbox = document.createElement("input");
    var label1 = document.createElement("label");
    var label2 = document.createElement("label");
    var commentbox = document.createElement("input");
    var submit = document.createElement("input");
    boxdiv.setAttribute("id", "comment");
    posterbox.setAttribute("type", "text");
    posterbox.setAttribute("id", "poster");
    posterbox.setAttribute("name", "poster");
    commentbox.setAttribute("type", "text");
    commentbox.setAttribute("id", "reply");
    commentbox.setAttribute("name", "reply");
    submit.setAttribute("type", "button");
    submit.setAttribute("value", "Comment");
    submit.setAttribute("onclick", "post("+status_id+")");
    label1.setAttribute("for", "poster");
    label1.innerHTML = "Name: ";
    label1.setAttribute("for", "reply");
    label2.innerHTML = "Reply: ";
    boxdiv.appendChild(label1);
    boxdiv.appendChild(posterbox);
    boxdiv.appendChild(document.createElement("br"));
    boxdiv.appendChild(label2);
    boxdiv.appendChild(commentbox);
    boxdiv.appendChild(document.createElement("br"));
    boxdiv.appendChild(submit);
    status.appendChild(boxdiv);
   }
 
   function formatTime(i) {
    if (i < 10)
       i = "0" + i;
    return i;
   }
 
   function post(status_id) {
 
      var comment = document.getElementById("reply" + status_id).value;
      var poster = document.getElementById("poster" + status_id).value;
 
      if (comment == "" || poster == "") {
       alert("You forgot to fill in the fields!");
       return;
      }
 
    if (window.XMLHttpRequest) {
       xmlhttp = new XMLHttpRequest();
      } else {
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
    xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("comments" + status_id).innerHTML = xmlhttp.responseText;
         }
      }
      var poster_ip = "<?php echo $_SERVER['REMOTE_ADDR']; ?>";
    xmlhttp.open("POST", "post.php", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("status_id="+status_id+"&poster="+poster+"&reply="+comment+"&posterip="+poster_ip);
   }
 
  </script>
  <style type="text/css">
 
   #status {
    width: 400px;
    height: auto;
    border: 1px solid gray;
    margin-bottom: 20px;
   }
 
   #status img {
    float: left;
    padding: 5px;
   }
 
   #status h4 {
    float: left;
    margin-left: 15px;
   }
 
   #status p {
    border-top: 1px solid gray;
    clear: both;
    padding: 5px;
   }
 
   #status a {
    margin: 10px;
   }
 
   #comment_poster {
    width: auto;
    padding: 5px;
    background: rgb(234, 239, 244);
    margin-top: 5px;
    font-weight: bold;
   }
 
   #comment {
    width: auto;
    padding: 5px;
    background: rgb(234, 239, 244);
   }
 
  </style>
 </head>
 
 <body>
  <h1>AJAX powered comment boxes system</h1>
 
  <?php
 
   $conn = mysql_connect('database servername', 'username', 'password');
   if (!$conn)
    die('Unable to initiate connection! ' . mysql_error());
   mysql_select_db('db name');
 
   $query = "SELECT * FROM ajax_statuses";
   $result = mysql_query($query);
 
   $input_id = 1;
   while($row = mysql_fetch_array($result)) {
    echo '
    <div id="status">
     <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs466.snc4/49132_100001901520624_8137639_q.jpg" alt ="" />
     <h4>' . $row['status_poster'] . '</h4>
     <p>' . $row['status'] . '</p>
     <div id="comments'.$input_id.'" style="margin: 10px;">';
 
     $query = "SELECT * FROM ajax_replies WHERE reply_id = " . $row['status_id'] . " ORDER BY reply_date ASC";
     $result2 = mysql_query($query);
 
     while($row2 = mysql_fetch_array($result2)) {
      echo '<div id="comment_poster">' . $row2['reply_name'] . ' posted:</div>
      <div id="comment">' . $row2['reply'] . ' - at: ' . $row2['reply_date'] . '</div>';
     }
 
     echo '</div>
     <div id="comment">
      <label for="poster">Name: </label><input type="text" id="poster'.$input_id.'" name="poster'.$input_id.'" /><br />
      <label for="reply">Reply: </label><input type="text" id="reply'.$input_id.'" name="reply'.$input_id.'" /><br />
      <input type="button" value="Comment" onclick="post(' . $row['status_id'] . ')" />
     </div>
    </div>';
 
    $input_id++;
    // <a href="javascript: showCommentBox(' . $row['status_id'] . ');" title="comment on this whore\'s status">Comment</a>
   }
 
   mysql_close($conn);
 
  ?>
 
 </body>
</html>

PHP Code:

<?php
 $status_id = $_POST['status_id'];
 $poster = htmlspecialchars($_POST['poster']);
 $reply = htmlspecialchars($_POST['reply']);
 $poster_ip = $_POST['posterip'];
 $post_date = date("Y-m-d H:i:s");
 
 $conn = mysql_connect('db servername', 'username', 'password');
 if (!$conn)
  die('Unable to initiate connection! ' . mysql_error());
 mysql_select_db('db name');
 
 $query = "INSERT INTO ajax_replies VALUES ($status_id, '$reply', '$poster', '$poster_ip', '$post_date')";
 $result = mysql_query($query);
 if (!$result)
  die(mysql_error());
 
 $query = "SELECT * FROM ajax_replies WHERE reply_id = " . $status_id . " ORDER BY reply_date ASC";
 $result = mysql_query($query);
 
 while($row = mysql_fetch_array($result)) {
  echo '<div id="comment_poster">' . $row['reply_name'] . ' posted:</div>
   <div id="comment">' . $row['reply'] . ' - at: ' . $row['reply_date'] . '</div>';
 }
 
 mysql_close($conn);
?>