Facebook Wall Script | Lessoncup Programming Blog

Sunday, 13 October 2013

Facebook Wall Script

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">&nbsp;<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

4 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons