Jquery Ajax Comment System | Lessoncup Programming Blog

Saturday, 28 September 2013

Jquery Ajax Comment System

This lesson is help you to build the comment system using Jquery & Ajax like Facebook wall comment posting.



Step 1

Add the bellow code in index.php inside the <HEAD> tag
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('.addComment').click(function(){
  
    
  var element = $(this);
  var id = element.attr("id");
  
  $('#commentBox'+id).slideToggle(200);
  $('#comment'+id).focus();
  $('#comment'+id).val('');
  
  
  
 });
 
 $('.comBtn').click(function(){
  
  var element = $(this);
  var cid = element.attr("id");
  
  var comment=$('#comment'+cid).val();
  var datasend = 'com='+ comment + '&pid=' + cid;
  
  if(comment==""){
   
   alert("Please enter the comment");
   $('#comment'+cid).focus();
   
  }else{
  
  $.ajax({
   
   type:"POST",
   url:"comment.php",
   data:datasend,
   cache:false,
   success:function(){

     $('#comment'+cid).val('');

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


</script>

Step 2

in html take the div with id commentBox and pass the php variable to the id like #commentBox$variable and put this div into a loop because here we are going to work with multiple forms. now take the form and pass the variable to form name like <form name="$variable"> and same to the comment button.

<a class="addComment" id="<?php echo $full['pid']?>">Comment</a>

<div id="commentBox<?php echo $full['pid']?>" class="combox">

<form action="" method="post" name="<?php echo $full['pid']?>">

<textarea name="comment" class="comment" type="text" id="comment<?php echo $full['pid']?>" style="float:left;" placeholder="Comment">
</textarea>

<input name="comBtn" class="comBtn" id="<?php echo $full['pid']?>" type="submit" value="Comment" />

</form>

</div>

Step 3

Create the database
--
-- Table structure for table `posts`
--

CREATE TABLE IF NOT EXISTS `posts` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `post` varchar(255) NOT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

--
-- Table structure for table `comments`
--

CREATE TABLE IF NOT EXISTS `comments` (
  `cmid` int(11) NOT NULL AUTO_INCREMENT,
  `pid` int(11) NOT NULL,
  `comment` varchar(255) NOT NULL,
  `date` date NOT NULL,
  PRIMARY KEY (`cmid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

--


Live Demo   Download Script

2 comments :

  1. sir it is very good site .. i am beginner in php .
    can you upload facebook style chat box system.
    thank you

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons