Friday, 11 November 2016

facebook like comment script using php, jquery and ajax

Facebook like comment system using ajax and php is nice and user appealing to comment on post, with the huge help of php and ajax you can build comment system system like facebook and add to your website
Demo Download
We are going to create two php file
  1. index.php
  2. ajaxcomment.php
Html form 
Create new php file index.php copy and paste this code on it, don’t forget to include jquery library

<form class="form-inline" action="" method="post"> 
        <div class="form-group"> <label for="comment">Comment Text</label> <br>
        <textarea name="comment" id="comment" class="form-control"></textarea><br>
        <div class="form-group"> <label for="name">Name</label> <br/>
        <input type="text" id="username" name="username" class="form-control" placeholder="Doe"> </div><br><br>
        <button type="submit" class="btn btn-primary comment_submit">Send invitation</button> 
      </form>
This file contain simple html form

PHP comment script
Create new php file ajaxcomment.php copy and paste this code on it
<?php
// include your database configuration file

if (isset($_POST) && ($_POST!="")) {
 $username=htmlentities($_POST['username']);
 $comment=($_POST['comment']);
 $time=date('s');

 //$db->query("INSERT INTO comment (username, commenttext) VALUES ('$username', '$comment') "); 

echo '<div>
 <strong>'.$username.'</strong> says: '.$comment.'- {'.$time.' sec}
 </div><br>';
}

This return the values of  form

Ajax Script
Copy and paste this code at the end of the form

<script type="text/javascript">
$(function() { 

$(".comment_submit").click(function() { // if user click on comment button carry the below actions
var username = $("#username").val(); // get username value
var comment = $("#comment").val(); // get comment value
 
    var dataString = 'comment=' + comment +'&username=' + username; //assign for ajax call
  
  if(comment=='' || username=='') // if comment and username is empty trigger alert
     {
    alert('Please Enter Content');
     }
  else //else trigger ajax call
  {
  $("#flash").fadeIn(400).html('<img src="ajax.gif">'); //show flash on div with delay
$.ajax({
    type: "POST", // ajax call type post
  url: "ajaxcomment.php", // page to tranfer our information without pageload
   data: dataString, //call our variable to process data
  cache: false,
  success: function(html){ // if successfull

   //append to comment-list {id}
  $("#comments-list").append(html); //display comment and username
    $("#comment").val(''); //empty comment field
     $("#username").val(''); //empty comment field
 
  $("#flash").hide(); // hide flash
  
  }
 });
}
return false;
  });
});

</script>

The ajax change the text of a div after ajax call, this happen when user click comment button.
Demo Download
Thanks for been here with me....

7 comments:

  1. you are the man... i love your courage... you are the best keeping doing good job

    ReplyDelete
  2. bro good day i tried implementing this script on my local site it worked..! but the problem is it does not comment on the next post.. it only comments on the first post.

    ReplyDelete
    Replies
    1. Hello @Chinasa

      You have to get the post [id] and insert to form input and your loading div
      -----------------------------------------------------------------------------------------
      <div id="cflash<?php echo $id; ?>"></div>

      <form action="" method="post" name="<?php echo $id; ?>">
      <input value="" placeholder="First to comment..." name="comment" class="form-control" id="comment<?php echo $id; ?>" type="text" autocomplete="off" />
      <input value="<?php echo $username; ?>" type="hidden" id="username<?php echo $id; ?>" name="username" />
      <br/>
      <button type="submit" value="Comment" class="comment_submit btn btn-success" id="<?php echo $id; ?>" />comment</button>
      </form>


      ----------------------------------------------------------------------------------
      And change ajax script to fit the above form

      -------------------------------------------------------------------------------------

      <script type="text/javascript">
      $(function()) {

      $(".comment_submit").click(function()) { // if user click on comment button carry the below actions
      var postid = $(this).attr('id'); // track post id
      var username = $("#username"+postid).val(); // get username value
      var comment = $("#comment"+postid).val(); // get comment value

      var dataString = 'comment=' + comment +'&username=' + username; //assign for ajax call

      if(comment=='' || username=='') // if comment and username is empty trigger alert
      {
      alert('Please Enter Content');
      }
      else //else trigger ajax call
      {
      $("#flash"+postid).fadeIn(400).html('<img src="ajax.gif">'); //show flash on div with delay
      $.ajaxundefined{
      type: "POST", // ajax call type post
      url: "ajaxcomment.php", // page to tranfer our information without pageload
      data: dataString, //call our variable to process data
      cache: false,
      success: function(html){ // if successfull

      //append to comment-list {id}
      $("#comments-list"+postid).append(html); //display comment and username
      $("#comment"+postid).val(''); //empty comment field
      $("#username"+postid).val(''); //empty comment field

      $("#flash"+postid).hide(); // hide flash

      }
      });
      }
      return false;
      });
      });

      </script>


      Hope this solve your problem.

      Delete
    2. :) cool bro i'll try it out......

      Delete
    3. worked perfectly.... :) thanks...

      Delete
    4. Am glad it help solved your problem...

      Delete

Hit me with a comment!