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.
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.