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
hi
ReplyDeleteOut of excitement i checked this post but could not find any where who should use this kind of comment system with j query and ajax?