Sunday, June 24, 2012

Display Collapsed Comments like Facebook with Jquery and Ajax

Display Collapsed Comments like Facebook with Jquery and Ajax
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 } }?>

4 comments:

  1. I'd like this content content articles, Help to make valued, I'd choose a lot more data by using this, great deal of thought is particularly appealing., Bless a person created for composing. free standing poster display

    ReplyDelete
  2. Going to graduate school was a positive decision for me. I enjoyed the coursework, the presentations, the fellow students, and the professors. And since my company reimbursed 100% of the tuition, the only cost that I had to pay on my own was for books and supplies. Otherwise, I received a free master’s degree. All that I had to invest was my time. Watch The Lion King 2019 Online

    ReplyDelete