Facebook/Twitter style ‘LoadMore Results’ applications are extremely useful in Web2.0 scenario. This technique saves a lot of bandwidth as well as loading time of the page. I have developed a simple script showing how to develop such an application.
View the live demo for watching it working!
Table Structure
CREATE TABLE updates(
upd_id INT AUTO_INCREMENT PRIMARY KEY,
text TEXT
);
HTML & Jquery Code
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('.more_updates').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="loading.gif" />');
$.ajax({
type: "POST",
url: "loadmore.php",
data: "lastupd="+ ID,
cache: false,
success: function(html)
{
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
});
</script>
<body>
<div id='container'>
<div class="heading">Facebook/Twitter Like Load More Results</div>
<?php include "loadonce.php"; ?>
</div>
</body>
loadonce.php
<ol class="timeline" id="updates">
<?php
include('../connect.php');
$sql=mysql_query("select * from `updates` ORDER BY `upd_id` DESC LIMIT 3");
while($row=mysql_fetch_array($sql))
{
$upd_id=$row['upd_id'];
$text=$row['text'];
?>
<li>
<?php echo $text; ?>
</li>
<?php } ?>
</ol>
<div id="more<?php echo $upd_id; ?>" class="morebox">
<a href="#" class="more_updates" id="<?php echo $upd_id; ?>">more updates</a>
</div>
loadmore.php
<?php
include("../connect.php");
if(isset($_POST['lastupd']))
{
$lastupd=$_POST['lastupd'];
$lastupd=mysql_real_escape_string($lastupd);
$result=mysql_query("select * from `updates` where `upd_id` < '$lastupd' order by `upd_id` desc limit 3");
while($row=mysql_fetch_array($result))
{
$upd_id=$row['upd_id'];
$text=$row['text'];
?>
<li>
<?php echo $text; ?>
</li>
<?php
}
?>
<div id="more<?php echo $upd_id; ?>" class="morebox">
<a href="#" id="<?php echo $upd_id; ?>" class="more_updates">more updates</a>
</div>
<?php
}
?>
CSS Code
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
color:#3366FF;
}
ol.timeline li a
{
color:#3366FF;
text-decoration:none;
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none; color:#3366FF;}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:480px; border:2px dashed #cccccc; padding:5px; }
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:97%;
}
WOOOOW… this is super simple load more post..
I looking for this article, but the other is very difficult for me.,..
thanks sir.. greetings from indonesia..
may I bookmark your blog..? 🙂
The live demo is no longer available.
I’ll try using this scripty of yours, it looks really nice, I hope it works for me 2!
use offset in mysql
i.e.
$result=mysql_query(“select * from `updates` limit 0, 3”);
$result=mysql_query(“select * from `updates` limit 3, 3”);
$result=mysql_query(“select * from `updates` limit 6, 3”);