In this post I want to explain Facebook like Collapsed Comments, while clicking View all Comments link it displays all the existing comments. I made a demo with jquery, ajax and php. Take a look at this live demo
Download Script 
Live DemojQuery Cookbook (Animal Guide)
Database Design
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
Javascript Code
Contains javascipt code. $('.view_comment').click(function(){} - view_comments is the class name of anchor 'View all Comment'. Using $(this).attr("id") calling main message msg_id field value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
view.php
Contains PHP code displaying two results form the Comments table
<ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
viewajax.php
Contains PHP code displaying results form the Comments table.
<?php
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
Nice code, but you don't escape any of the post variables. Your code is vulnerable to SQL injection.
ReplyDeleteYou should use something like mysql_real_escape_string() on every user input that is referenced in your database query.
nice toturial, can the next toturial be about the exapanding textbox that is used on facebook, i am trying to look for that, but i cnt seem to find it, the textbox expands automatically when set on focus or when you click on it, if you know what i mean
ReplyDeletethanks brother its useful
ReplyDelete@Anonymous - It's a tutorial. You may modify it anyway you want.
ReplyDeletelike it
ReplyDelete$comment=$rowsmall['comment'];
ReplyDeleteto
$comment=$rowsmall['comments'];
Almost 1,000,000 views, good look.
ReplyDeletegood work sir...........
ReplyDeletethanks..........
Hey...how do you add this code to the existing Facebook_Wall_Script.php?
ReplyDeleteI have tried
and nothing!
Great code but how do you add this code to the exsisting facebook wallscript?
ReplyDeleteVery Good! greatings from mexico
ReplyDeletegr8
ReplyDeletethis guy is absolute a great man! he comes up with tutos that are easy to handle thx
ReplyDeleteviewajax.php - line 16
ReplyDelete$comment=$r['comment'];
to
$comment=$r['comments'];
This is unbelievable. Where on earth have i been all this while? Srinivas I must confess Im completely speechless.
ReplyDeleteThanks a million times.
$prefix = ???
ReplyDeleteDone !
ReplyDeleteThanks,
ReplyDeletebut in this tutorial it shows the comments of 1 message only. If we have 20 messages at the page, then how can we modify the sql query so to find the comments of each message without having to do 20 extra queries? (or should we do 21 queries? 1 for the messages and the other 20 for the comments of each message?)
whow thanks.. that's what's great....
ReplyDeletelike it! :)
ReplyDeleteHi. Srinivas,
ReplyDeletethanks for tutorial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesia
Hi. Srinivas,
ReplyDeletethanks for tutorial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesia
and how post a new comment?
ReplyDeletehow can I merge this script to view.php? can anyone help me?
ReplyDeleteCan i have a similar control in asp.net ?
ReplyDeleteYou make god tutorials. Shows previews and examples is your diferencial.
ReplyDeleteUseful sharing!
ReplyDeletehow can i display the view all comments in more posts displaying the particular users
ReplyDeletehow to view all the comments in submitting more post for paticular user, i create more post but view all comment click then display static at a first post but not displaying dynamically for any other post ,...........
ReplyDeletehow to solve this?
Nice JOb
ReplyDeletehow to display comment based on page from database
ReplyDeleteSimple and Good One - Ds script
ReplyDeletethank you
ReplyDeletecan you please tell me how i can do the same thing in js,jsp,mysql,jquery.
ReplyDeleteThank you