Display Collapsed Comments like Facebook with Jquery and Ajax
Wall Script
Follow Me:
Friday, December 04, 2009

Display Collapsed Comments like Facebook with Jquery and Ajax

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

Display Collapsed Comments like Facebook with Jquery and Ajax

Download Script     Live Demo

jQuery 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));
);



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>


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>

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 } }?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


34 comments:

  1. Nice code, but you don't escape any of the post variables. Your code is vulnerable to SQL injection.

    You should use something like mysql_real_escape_string() on every user input that is referenced in your database query.

    ReplyDelete
  2. 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

    ReplyDelete
  3. @Anonymous - It's a tutorial. You may modify it anyway you want.

    ReplyDelete
  4. $comment=$rowsmall['comment'];
    to

    $comment=$rowsmall['comments'];

    ReplyDelete
  5. Almost 1,000,000 views, good look.

    ReplyDelete
  6. good work sir...........

    thanks..........

    ReplyDelete
  7. Hey...how do you add this code to the existing Facebook_Wall_Script.php?

    I have tried



    and nothing!

    ReplyDelete
  8. Great code but how do you add this code to the exsisting facebook wallscript?

    ReplyDelete
  9. this guy is absolute a great man! he comes up with tutos that are easy to handle thx

    ReplyDelete
  10. viewajax.php - line 16

    $comment=$r['comment'];
    to
    $comment=$r['comments'];

    ReplyDelete
  11. This is unbelievable. Where on earth have i been all this while? Srinivas I must confess Im completely speechless.

    Thanks a million times.

    ReplyDelete
  12. Thanks,
    but 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?)

    ReplyDelete
  13. whow thanks.. that's what's great....

    ReplyDelete
  14. Hi. Srinivas,
    thanks 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

    ReplyDelete
  15. Hi. Srinivas,
    thanks 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

    ReplyDelete
  16. and how post a new comment?

    ReplyDelete
  17. how can I merge this script to view.php? can anyone help me?

    ReplyDelete
  18. Can i have a similar control in asp.net ?

    ReplyDelete
  19. You make god tutorials. Shows previews and examples is your diferencial.

    ReplyDelete
  20. how can i display the view all comments in more posts displaying the particular users

    ReplyDelete
  21. how 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 ,...........
    how to solve this?

    ReplyDelete
  22. how to display comment based on page from database

    ReplyDelete
  23. Simple and Good One - Ds script

    ReplyDelete
  24. can you please tell me how i can do the same thing in js,jsp,mysql,jquery.
    Thank you

    ReplyDelete

Make in India