Pages

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

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')

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.