Few days back i have posted one lesson Jquery Ajax Comment System now i added some code to display the given comments to the posts just i have added few line of code to display the comments and to delete the comments.

Step 1

Add the bellow code in index.php inside the <HEAD> tag.

<script src=""http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.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('');
  $('#comment'+id).attr("placeholder", "Comment");
  
  
  
 });
 
 
 
 $('.comBtn').click(function(){
  
  var element = $(this);
  var cid = element.attr("id");
  
  var comment=$('#comment'+cid).val();
  var datasend = 'com='+ comment + '&pid=' + cid;
  
  if(comment==""){
   
   $('#comment'+cid).focus();
   $('#comment'+cid).attr("placeholder", "Enter the comment..");
   
  }else{
  
  $.ajax({
   
   type:"POST",
   url:"comment.php",
   data:datasend,
   cache:false,
   success:function(html){
    
    $('#loadcomment'+cid).append(html);
    $('#comment'+cid).val('');
    
   }
    
  });
   
  }
  
  return false;
     
  });
  
  
  $('.delete').click(function(){
  
  var element=$(this);
  var did=element.attr('id');
  var datadel='delete='+did;
  
  if(confirm("Are you sure you want delete this POST!")){

  $.ajax({
   
   type:"POST",
   url:"delete.php",
   data:datadel,
   cache:false,
   success:function(){
    
    $('#post'+did).hide();
    
   }
   
  });
  
  }
  
  return false;
  
 });
 
 $('.comdelete').live("click",function(){
  
  var element=$(this);
  var cdid=element.attr('id');
  var datadel='cmdelete='+cdid;
  
  if(confirm("Are you sure you want delete this Comment!")){

  $.ajax({
   
   type:"POST",
   url:"comdelete.php",
   data:datadel,
   cache:false,
   success:function(){
    
    $('#comdisplay'+cdid).hide();
    
   }
   
  });
  
  }
  
  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.i have added one more div to display the comments loadcomment

<ul>
<?php
$getposts=mysql_query("select * from posts");
while($full=mysql_fetch_array($getposts)){
?>

<li id="post<?php echo $full['pid'];?>">
<img src="pik.jpg" align="absmiddle" style="float:left; width:50px; border:solid #CCC1px; padding-right:5px;">
<h1 style=" font-size:12px; margin-top:0; "><?php echo $full['post']?></h1>
<div style="float:right; margin-top:-28px; cursor:pointer;" class="delete" id="<?php echo $full['pid'];?>">
<img src="delete.png" align="absmiddle" style="width:18px;" title="Delete" />
</div>
<a class="addComment" id="<?php echo $full['pid']?>">Comment</a>


<div id="loadcomment<?php echo $full['pid'];?>">

</div>

<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>
</li>
<?php }?>
</ul>

Step 3

Comment.php

<?php

extract($_REQUEST);

include("db.php");

mysql_query("insert into comments(pid,comment,date) values('$pid','$com',now())");

$sql=mysql_query("select * from comments order by cmid desc");
$full=mysql_fetch_array($sql);
$cmid=$full['cmid'];
$cname=$full['comment'];
?>

<div id="comdisplay<?php echo $cmid;?>" class="comdisplay">
<div style="float:right; margin-top:-5px; margin-right:5px; cursor:pointer;" class="comdelete" id="<?php echo $cmid;?>">
<img src="delete.png" align="absmiddle" style="width:18px;" title="Delete" />
</div>
<?php echo $cname;?>
</div>

Step 4

delete.php

<?php

extract($_REQUEST);

include("db.php");

mysql_query("delete from posts where pid='$delete'");

?>

Step 5

comdelete.php

<?php

extract($_REQUEST);

include("db.php");

mysql_query("delete from comments where cmid='$cmdelete'");

?>

Step 6

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

Pages

Friday, 11 October 2013

Comment system using Jquery & Ajax