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 DemoUpdated Version
First create a database table.
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);
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>
$(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>
$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'];
<?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>
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>
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'];
<?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 } } ?>
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 } } ?>
If you feel free just post a comment don't spam.
very nice!
at least throw a mysql_escape_string in there for the nabz
If someone else downloads the downloadable script and asks himself why the update stops working after the second click on the Mooore button here is the fix: In the more_ajax.php file replace
$("#load_updates").append(html);
with
$("#more_updates").append(html);
Now it should work.
Look like this demo isn't working anymore :(
Demo link
http://www.9lessons.net63.net/moree.php
Hi,
I tried the code, but It seems that after resulting the first output the link for MORE gets disappeared..!! I think $(".more2") is creating issues. any help would be highly appreciated.
Thanks
Puneet
Hi Srinivas,
Somehow I am able to make some part of my code working, bt the problem is still there... after displaying the second set of result the link has stopped working.. This is what so far I have done for the Step: 2 http://pastie.org/617317
Seeking for your help
Thanks
Puneet
Hi Puneet,
Sorry for the late reply just give some time.
Hi im getting an error message of
Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in E:\xampp\htdocs\v2.0\more\more_ajax.php on line 53
At the end of my recordset, sometimes MORE vanished and sometimes the picture LOAD continues and there is no mor result in my database
ww
just did in this url :)
EXTRA !
v.v nice
Nice stuff buddy
For all those who din it working try it urself
he gave a good start now u too wrk!!!
i am trying this script out @ http://hushtalk.com/more_tut.php but it wont work i get Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.4; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
Timestamp: Mon, 24 May 2010 17:13:42 UTC
Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: http://hushtalk.com/first.js
all i did was copying the file plus the first line is just simply :
< script type="text/javascript" >
any ideas?
@hushtalk
Try this tutorial Version 2.0
http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html