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

6 comments :

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

    ReplyDelete
  2. Hi there! Nice stuff, please do tell me when you finally post something like this! new york web designs

    ReplyDelete
  3. I believe that a simple and unassuming manner of life is best for everyone, best both for the body and the mind. website designers nyc

    ReplyDelete
  4. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. recruitment software

    ReplyDelete
  5. I found your this post while searching for some related information on blog search...Its a good post..keep posting and update the information. satta king online

    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