My script below:
Main page: jQuery code
<script type="text/javascript">
$(document).ready(function(){
$("#loadmorebutton").click(function (){
$('#loadmorebutton').html('<img src="ajax-loader.gif" />');
$.ajax({
url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('#loadmorebutton').html('Load More');
}else{
$('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
}
}
});
});
});
</script>
HTML Code:
<div id="wrapper">
<div id="postswrapper">
<?php
$getlist = mysql_query("SELECT * FROM table_name LIMIT 25");
while ($gl = mysql_fetch_array($getlist)) { ?>
<div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
<?php } ?>
</div>
<button id="loadmorebutton">Load More</button>
</div>
</div>
The loadmore.php page contains;
<?php
$getlist = mysql_query("SELECT * FROM table_name WHERE id < '".addslashes($_GET['lastid'])."'
LIMIT 0, 25 LIMIT 10");
while ($gl = mysql_fetch_array($getlist)) { ?>
<div><?php echo $gl['title']; ?></div>
<?php } ?>
This script loads the initial 25 items from the database on the main page. Clicking "Load More" will trigger loadmore.php, fetching an additional 10 entries starting from the last loaded ID. The aim is to dynamically hide the "Load More" button when there are less than 25 entries and display it otherwise.