Facebook/Twitter Like load more results with Jquery

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!




Live Demo Download Script

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%;
}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

3 thoughts on “Facebook/Twitter Like load more results with Jquery

  1. 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”);

Comments are closed.