Few days back i have posted one lesson Comment system using Jquery & Ajax now i have used JQuery latest 1.10.2 version and replaced old events to new events and added few features like wall status box with that you can give your status and see the post and you can give the comments to the post and you can delete the comment as well as post's also let's see how it will do and how it will work.
Javascript
Add the bellow code in index.php inside the <HEAD> tag. here i have used jquery latest version after using this i have faced some problem with .live() function it is not binding live data after some research i have found the solution for this .live() function doesn't work from 1.7.2 to till so i replaced the .live() function to .on().
Ex: .live()
(selector).live(event function(){
});
after Replaced with .on()
(body).on(event, selector, function(){
})
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('.status').focus(function(){
$('.status').addClass('statusfocus');
$('.postbar').show();
});
$('.postbtn').click(function(){
var element=$(this);
var ID=element.attr('id');
var msg=$('#status').val();
if(msg==""){
$('#status').attr("placeholder", "Share what you like?");
}else{
var postData='post='+msg;
$("#loader").show();
$("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "posts.php",
data: postData,
cache: false,
success: function(html){
$("ul#updatepost").prepend(html);
$("ul#updatepost li:first").slideDown("slow");
$('#status').val('');
$('#loader').hide();
}
});
}
return false;
});
$('body').on("click",".addComment",function(){
var element = $(this);
var id = element.attr("id");
$('#commentBox'+id).slideToggle(200);
$('#comment'+id).focus();
$('#comment'+id).val('');
$('#comment'+id).attr("placeholder", "Write a Comment..");
});
$('body').on("click",".comBtn",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;
});
$('body').on("click",".delete",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;
});
$('body').on("click",".comdelete",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>
HTML
index.php in html take the div with id statusbox and textarea box to enter the posts and #updatepost is to display live comments.<div id="statusbox"> <form action="" method="post" name="statusform"> <textarea name="status" class="status" id="status" placeholder="What's on your mind?" title="What's on your mind?"></textarea> <div id="postbar" class="postbar"> <input name="post" type="submit" value="Post" class="postbtn" /> </div> </form> </div> <div id="loader"></div> <div class="comment_box"> <ul id="updatepost"> </ul> </div>
posts.php
this file is to display the posts and bind the live data into #updatepost id in index.php file and here i added comment box to give the comments to the post and delete the posts and comments also..addcomment button is to toggle the comment box
#loadcomment Id is to display live comment data. .comBtn button is to bind live the comment data into .comdisplay in comment.php file .delete class is to delete the posts live data from delete.php file.
<?php
extract($_REQUEST);
include("db.php");
mysql_query("insert into posts(post) values('$post')");
$sql=mysql_query("select * from posts order by pid desc");
$full=mysql_fetch_array($sql);
$pid=$full['pid'];
$pname=$full['post'];
?>
<li id="post<?php echo $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 $pname;?></h1>
<div class="delete" id="<?php echo $pid;?>">
X
</div>
<a class="addComment" id="<?php echo $pid?>">Comment</a>
<div id="loadcomment<?php echo $pid;?>">
</div>
<div id="commentBox<?php echo $pid?>" class="combox">
<form action="" method="post" name="<?php echo $pid?>">
<textarea name="comment" class="comment" type="text" id="comment<?php echo $pid?>" style="float:left;" placeholder="Write a Comment..">
</textarea>
<input name="comBtn" class="comBtn" id="<?php echo $pid?>" type="submit" value="Comment" />
</form>
</div>
</li>
Comment.php
in this file i have taken to classes .comdisplay class to display the live comment data from post.php file and .comdelete class to delete the comments from comdelete.php file<?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 class="comdelete" id="<?php echo $cmid;?>">
X
</div>
<?php echo $cname;?>
</div>
delete.php
<?php
extract($_REQUEST);
include("db.php");
mysql_query("delete from posts where pid='$delete'");
?>
comdelete.php
<?php
extract($_REQUEST);
include("db.php");
mysql_query("delete from comments where cmid='$cmdelete'");
?>
Database
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
Nice. Thanks.
ReplyDeleteIt works,helpful tutorial thanks.
ReplyDeleteYou are welcome tq
DeleteThis comment has been removed by the author.
ReplyDelete