jQuery Load More Posts using Ajax | Lessoncup Programming Blog

Thursday, 12 December 2013

jQuery Load More Posts using Ajax

Hi, today i am going to tell you about how to display the old posts by clicking show more or load more buttons and we have seen many sites like Facebook, twitter and others, before this feature all web developers put pagination to see next results but now this concept is given a advanced look to WEB WORLD and following all developers, i have developed this APP by using jQuery and Ajax, let's see how we do this.


HTML

just include the ads.php file inside the UL tag, and take one DIV and give it class name more and write the show more while clicking on this button the results will append into UL tag
<div class="lessoncup">

<ul>
<?php
include('ads.php');
?>
</ul>
<div class="more">Show more</div>
</div>

JAVASCRIPT

write the click function to more button as selector, here just take the LI tag last ID and store it getLastID variable, now just send that variable to getad.php file using ajax request and appending the results into UL tag, here in ajax success function i write the condition for if we not found any content from getad.php file i am changing the content of show more button text using this $('.more').text('No more Posts to show')
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.more').click(function(){
  
  var getLastID=$('li:last').attr('id');
  
  $('.more').html('<img src="ajax-loader.gif" align="absmiddle">');

   $.ajax({
    
    type: "POST",
    url: "getad.php",
    data: "nextID="+getLastID,
    cache: false,
    success: function(msg){
     
     $('ul').append(msg);
     
     $('.more').text('Show more');
     
     if(!msg){
      
      $('.more').text('No more Posts to show').css({"cursor":"pointer"});
     }
     
    }
     
    
    });

 });
     
});


</script>

ads.php

in this file just write the query and fetch the records inside the LI tag by using while loop and put the records limit to 3
<li style=" background-color:#f2f2f2; color:#666; height:auto; padding:5px; font-weight:bold;">Recommended Pages</li>
<?php
include('db.php');
extract($_REQUEST);
$news=mysql_query('select * from news order by nid desc limit 3');
while($full=mysql_fetch_array($news)){
?>

<li id="<?php echo $full['nid']?>">

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>
You and 215 other friends like this.

</li>
<?php }?>

getad.php

in this file write the query to fetch the records, here the logic is simple i am using where condition in query to show the old records based on the previous last record ID nid<'$nextID', here the nid is database column id name and i am using Less Than Operator to compare the two values, if we found any Less Value in nid column from Greater Value of nextID, based on this algorithm the result will continue until to end of the records.
<?php
include('db.php');
extract($_REQUEST);
$news=mysql_query("select * from news where nid<'$nextID' order by nid desc limit 3");
while($full=mysql_fetch_array($news)){
?>

<li id="<?php echo $full['nid']?>">

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>
You and 215 other friends like this.

</li>
<?php }?>

Live Demo   Download Script

2 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons