How to Load Data Dynamically on Page Scroll using jQuery and PHP ?

scroll page load data

In this tutorial, we are going to see about loading data into a web page dynamically as the user scrolls it. We will be using jQuery and AJAX for the dynamic load on the scroll. Initially, we will show a limited number of results on page load. The subsequent bunch of records will be shown while scrolling down the page using jQuery AJAX event handler. This is an alternate solution for per-page navigation scenario.

scroll page load data

jQuery AJAX Scroll Down Event Handler

AJAX Function

As the user keeps scrolling, the AJAX call will be continuously invoked until data reaches the end of the record in the database. Following is the AJAX function that shows the loading icon and retrieves data from the backend and shows it.

Javascript Event Handler

For loading subsequent record set, we have to know whether the scrollbar reached the bottom of the window. The following Javascript event handler will check if the scroll has reached the bottom and if it reaches then it will fire the AJAX call.

PHP Page (getresult.php)

PHP page requested by the AJAX scroll event handler is,

We are familiar with the above PHP script which we have already seen in jQuery pagination tutorial. Presently this PHP script returns 10 records for each scroll event since we have set it as the per-page limit.

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work. info@quickmysupport.com

Leave a Reply

Your email address will not be published. Required fields are marked *