Twitter Like More Button with jQuery and Ajax

This is an interesting tutorial I had developed this using jQuery and Ajax. Some days back twitter added new feature like 'more' button it's nice the some thing I'm presenting in this post.

 Download Script     Live Demo

Updated Version

Twitter Style Load More Results with jQuery and Ajax.

First create a database table.

CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);

Step 1

first.js
javascript code..

<script type="text/javascript" >
$(function() {
$(".more").click(function() {
var element = $(this);
var msg = element.attr("id");
$("#morebutton").html('<img src="ajax-loader.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "lastmsg="+ msg,
cache: false,
success: function(html){

$("#more_updates").append(html);
$(".more").remove();

}
});
return false;
});
});
</script>

more_tut.php
You have to run this file first. The first.js jquery code calling more_ajax.php.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>

<script type="text/javascript" src="first.js">
</script>

<?php

include('db.php');
$sql = mysql_query("SELECT * FROM messages order by msg_id desc limit 5;");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$msg=$row['msg'];

?>

<div>
<?php echo $msg; ?>
</div>
<?php } ?>
<div id="more_updates"></div>
<div class="more" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more"  href="#" >
More </a>
</div>
</div>

Step 2

second.js
javascript code

<script type="text/javascript" >
$(function() {
$(".more2").click(function() {
var element = $(this);
var msg = element.attr("id");
$("#morebutton").html('<img src="ajax-loader.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "lastmsg="+ msg,
cache: false,
success: function(html){
$("#more_updates").append(html);
$(".more"+msg).remove();
}
});

return false;
});
});
</script>

more_ajax.php

Ya.. here jQuery recalling the same file 'more_ajax.php' so you have to change the div tag class name just adding msg_id value.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>

<script type="text/javascript" src="second.js">
</script>

<?php

include('db.php');
if(isSet($_POST['lastmsg']))
{
$lastmsg = $_POST['lastmsg'];
$sql_check = mysql_query("SELECT * FROM messages where msg_id<'$lastmsg' order by msg_id desc limit 5;");
if(mysql_num_rows($sql_check))
{
while($row=mysql_fetch_array($sql_check))
{
$msg_id=$row['msg_id'];
$msg=$row['msg'];

?>

<div>
<?php echo $msg; ?>
</div>
<?php } ?>
<div id="more_updates"></div>
<div class="more<?php echo $msg_id; ?>" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more"  href="#" >
More </a>
</div>
</div>
<?php } } ?>