Dynamically load data on div scroll using php, mysql, jquery and ajax

by

In this tutorial I’ll show you how can you dynamically load data on div scroll using php, mysql, jquery and ajax or you can say that facebook like paging, When ever user will be bottom of the div or page then new data will be loaded instantly.

In this example i have database of countries and i need to display all country list inside the div, So when ever user scroll country div next list of countries will be loaded.

First of all create countries database.

CREATE TABLE IF NOT EXISTS `countries` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`sortname` varchar(3) NOT NULL,
`name` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=247 ;

sload
Create php file to make connection with database and fetch countries list as per limit.




Now create html file and put some css and html




    
    

    
 Loading Please wait...





    After that write jquery to send request to server on div scroll

    Now your final index.html file will be

    index.html

    

    
    
      

      
 Loading Please wait...

      See live demo and download source code.

      DEMO DOWNLOAD

      If you like this post please don’t forget to subscribe my public note book for more useful stuff

      Published by Rohit