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 amore button it is nice the some thing I am presenting in this post.

Download Script     Live Demo

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( wouldb.php);
$sql = mysql_query("SELECT * FROM messages order by msg_id desc limit 5;");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row[ amsg_id];
$msg=$row[ amsg];
?>
<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 amore_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( wouldb.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[ amsg_id];
$msg=$row[ amsg];
?>
<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 } } ?>

 Original Source:
http://9lessons.blogspot.com/2009/04/twitter-like-more-button-with-jquery.html