Few days back i developed facebook style simple comment system.
Jquery Ajax Comment System now i have just added a delete feature to delete the records.
Step 1
Add the bellow code in index.php inside the <HEAD> tag and i am adding one more function to delete the posts and requesting the page delete.php via ajax request.
<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('');
$('#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(){
$('#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;
});
});
</script>
Step 2
i am adding the DIV to put the delete icon and assign the ID with the php variable.<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="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
No comments :
Post a comment