Web Programming: Show More Comments – Ajax, Jquery, Php, Mysql

This script is just an idea of showing more comments, with no css, with this idea we can update this further as we want.

Clcik Here For Demo

Click Here For Source
This Contains: index.php, config.php, show_more.php, jquery.js and show_more.js

index.php

<?php
session_start();
ob_start();
require "config.php";

//getting more comments for a post

//EDIT these 4 variables
$table_name = "comments"; //table name
$post_id = 1;
$now_showing = 3; //intially show 3 comments
$show_more = 3; //show next 3
$sort_field = "added_dt"; //sorting field

//getting number of posts in a post id
$sql = "select * from $table_name where post_id=$post_id";
$rsd = mysql_query($sql);
$total_cmts = mysql_num_rows($rsd);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Post - More Comments</title>
<style>
body, td { margin: 0; padding: 4; font-family:Verdana; font-size:10px; }
#loading { position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
#more { text-transform: uppercase; color: #c2c2c2; cursor: pointer; }
div { padding: 2px; }
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="table1">
<tr>
<td id="comments">
			<?php
			$sql2 = "select * from $table_name where post_id=$post_id order by $sort_field desc limit $now_showing";
			$rsd2 = mysql_query($sql2);
			while($rs2 = mysql_fetch_array($rsd2))
			{
			?>
<div><?=$rs2['comment']?></div>
<?php
			} //while
			?></td>
</tr>
<tr>
<td>
			<span id="more">Show More</span>
<div id="loading" style="position: absolute;">LOADING...</div></td>
</tr>
</table>
<form id="myForm">
		<input type="hidden" name="show_more" id="show_more" value="<?=$show_more?>" />
		<input type="hidden" name="table_name" id="table_name" value="<?=$table_name?>" />
		<input type="hidden" name="post_id" id="post_id" value="<?=$post_id?>" />
		<input type="hidden" name="now_showing" id="now_showing" value="<?=$now_showing?>" />
		<input type="hidden" name="sort_field" id="sort_field" value="<?=$sort_field?>" />
	</form>
	<input type="hidden" name="total_cmts" id="total_cmts" value="<?=$total_cmts?>" /></div>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="show_more.js"></script>
</body>
</html>
</body>

show_more.php

<?php
session_start();
ob_start();
extract($_REQUEST);
require "config.php";

//get table contents
$start = $now_showing;
$sql = "select * from $table_name where post_id=$post_id order by $sort_field desc limit $start,$show_more";
$rsd = mysql_query($sql);
?>
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="content">
<?php
while($rs = mysql_fetch_array($rsd))
{
?>
<div><?=$rs['comment']?></div>
<?php
} //while
?></div>
</body>
</html>

show_more.js

//Variables
var loading = $("#loading");
var comments = $("#comments");
var more = $("#more");
var target_page, query, now_showing, total_cmts;

//show loading bar
function showLoading(){
	loading.slideDown("slow");
}
//hide loading bar
function hideLoading(){
	loading.slideUp("slow");
};

//update now showing after every click of show more
function update_now()
{
	now_showing = parseInt($("#now_showing").attr("value")) + parseInt($("#show_more").attr("value"));
	$("#now_showing").attr("value", now_showing );

	//hide show more when total comments are shown
	total_cmts = parseInt($("#total_cmts").attr("value"));
	if(now_showing >= total_cmts)
		more.slideUp("slow");
}

//When show more clicked
more.click(function(){
	showLoading();

	//define target page and query string
	target_page = "show_more.php";
	query = $("#myForm").serialize();

	//send request and append the response data in comments area
	$.get(target_page, query , function(data){
		comments.append(data);
		hideLoading();
		update_now();
	});
});

//intially hide loading bar
hideLoading();

---
source: beski.wordpress.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s