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!
ReplyDeleteat least throw a mysql_escape_string in there for the nabz
ReplyDeleteIf 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
ReplyDelete$("#load_updates").append(html);
with
$("#more_updates").append(html);
Now it should work.
Look like this demo isn't working anymore :(
ReplyDeleteHi,
ReplyDeleteI 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,
ReplyDeleteSomehow 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,
ReplyDeleteSorry for the late reply just give some time.
Hi im getting an error message of
ReplyDeleteWarning: 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
ReplyDeleteww
ReplyDeletejust did in this url :)
ReplyDeleteEXTRA !
ReplyDeletev.v nice
ReplyDeleteNice stuff buddy
ReplyDeleteFor 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
ReplyDeleteUser 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
ReplyDeleteTry this tutorial Version 2.0
http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html
why when i refresh the page all the comments go away.. is there anyway they can stay in page untill i delete them from the database
ReplyDeleteHey Guys:
ReplyDeleteFor all of you saying that the more link goes away, here is the solution, replace:
$("#load_updates").append(html);
with
$("#more_updates").append(html);
Would it be possible to come up with a tutorial to accomplish this task on WordPress. I have spent most of my time today on this and a couple close calls but with no/joy.
ReplyDeleteIf you replace it with $("#more_updates").append(html); then the things will become bunched up.
ReplyDeleteOK, if you take off "height:50px" they WILL NOT become bunched up but the page will cut 'em off.
ReplyDeleteNVM. It works fine now. It was just a problem with my CSS! :)
ReplyDeleteHello...
ReplyDeletethat nice work.
i have implement it on my local server and its working fine.
but when i have uploaded it on my live server it's reload the whole page when i click on more button..
Plz any one can help me out..
nice example...pekpekto
ReplyDeleteawesome..!! just what i needed!! stupendous project
ReplyDeleteGreat article! Thanks!
ReplyDeleteit doesn't load my other JS scripts anymore...
ReplyDeletenice example...:)
ReplyDeletehow can this be done by loading a rss feed instead?
ReplyDeleteI have a big problem with this code, it won't add th div more_updates the second time I click the more button....I don't understand why...any suggestion?
ReplyDeletenice one
ReplyDeleteThanks for sharing. A great tutorial. Exactly what I was searching for. Thanks again.
ReplyDelete