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?