Load More Data on Page Scroll using Ajax Jquery PHP

hello friends this one more video tutorial by webs listen in this video tutorial we have make discussion on how to load data dynamically on page scroll by using query Ajax and PHP this is one type of pagination in which we have load data more data on scroll page so on every scroll it below data from table and display on web page without refresh of web page in this video we will use query and Ajax for the dynamic load data on the scroll by using PHP script here we will fetch data from table by using Ajax request with its query and that send request up to PHP script that fetch data from database and send back result of data to Ajax request and display on web page this event will fire when user scrolled the page now let's start learning this topic this is our testing database and in this we have one table posts with table column light posted add post title post author and post description in this table we have already inserted hundreds of data so we will this data dynamically on page scroll event this is our index page and on this page we have already included JavaScript libraries query link and bootstrap framework link we will use functionality of both the library as per our requirement on this page first we have defined one division tag with attribute it is equal load data under this tag we will display posts data which we will fetch from table below this table we have defined one more division tag with attribute load data message under this tag we will display load more data message now we have moved to write its query code here first we have write variable limit is equal to 7 value of this variable we will use to fetch seven data on single select query then after we have right variable start is equal to zero we will use value of this variable to define starting pointer of the data below this we have defined one more variable action is equal to an active this variable value will be active if fresh data request is running otherwise this variable value will be inactive now we have defined one function load country data function with two arguments like limit and start this function displayed data on web page by using Ajax requests without refresh of web page under this function we have defined Ajax request and in this we have write first option URLs set to fetch dot PHP page we have send requested to this page in seconds option we have right method option set to post here we have used post method for send data to server in this third option we have right data option and then this we can define which data we have send to server here we have write limit and start variable data to server and fourth option we have right cast option and we have set to false this option will not cache operation data on browser in last option we have right success callback function this function has been called if request has been completed successfully and it will fetch data from server under this function now we want to display data on webpage on our division tag with the load data so we have write dollar with division target load data with the pend method and under this function we have write data argument this method will append a HTML data under the Steve Asian tag then after we want to check it has received data or not so we have right of statement and under this condition we have right data variable is equal to blank this condition will check if there is any data in this variable or not if there is data then it will execute if block otherwise it will execute else block suppose there data variable is blank then we want to display no data found message so we have write dollar with division tag within load data message with HTML method and under this we have write button tag with type is equal to button with text like no data found this method will display this button with text like no data found and in this block we want to change Action variable value change to active so we have right action variable is equal to active that means user action is running but suppose data variable has some value then it will execute else block and under this block we have right dollar with division target load data message with HTML method and under this method we have right button tag with attribute type is equal to button with text like please wait so this will display this message button on web page when it has received data from server under this block we want to change action variable value to an active that means user action has been completed so our function is ready this function will fetch data from table and display on webpage now we want to load this function when page has been load so we have right of statement and under condition we have right action variable value is equal to inactive this condition will check if value of this variable is equal to inactive then it will execute if block of code under this block first we want to change action variable value change to active so we have right action variable is equal to active so in this block we have changed this variable value to active after this we want to call this function so we have right load country data function with two arguments like limit variable and start variable this function will load first seven data from table and display on webpage now we have moved to write PHP code on fetch dot PHP page and on this page first we have write if statement and under condition we have writes a function with argument like dollar post limit variable and dollar post start variable this condition will check if both variable value is set then it will execute if block of code under this block we have write first we want to make database connection so we have write dal or connect variable is equal to MS CLE connect function with for argument like closed name set the locale lost username set to root password set to blank and database name set to testing after making database connection we have write all a query variable is equal to select start from table posts order by posted in descending order limit dollar post start variable comma dollar post limit variable this select query will fetch data from posts table with seven data with fetching start from Dollar post start variable now we want to execute this query so we have right dollar result variable is equal to miss click query function with two arguments in first argument we have right dollar Connect variable and in second argument we have right dollar query variable this function will execute query and store result in two dollar result variable then after we want to fetch data from dollar result variable so we have right while loop and under this we have right dollar row variable is equal to miss click fetch array function with dollar resolve variable argument this function will convert dollar resolved variable data to array in store into dollar row variable under while loop we have right echoes statement and first we want to display post title so we have right hat or three tag in between this tag we have right dollar row post title variable this will display post title below this we want to display post description so we have right dollar row post description variable this will display post description on webpage and lastly we want to display author name so we have right dollar roll post of the variable it will display author name on webpage so our code ready that load first seven data on webpage friends you can show when page has been loaded it has displayed top seven records from post table now we want to load more data on web page when page has been loaded from posts table so we have goads query code and here we have write dollar with window as selector with scroll method with function when we have scroll page then this code will execute under this block we have right of statement and under condition we have right dollar with window width scroll top method plus dollar windows selector with height method greater than dollar with division target load data with height method an action variable value is equal to an active this first get valued from scroll top method that will have that value window and second type method return height of division tag look at load data if height of first will greater than it will execute if block and it will also check if action variable value is equal and active then also it will execute if block of code if you have not write this condition then it will fire action two times under this block first have right action variable is equal to active here we have first change value of action variable value inactive to active after this we have right start variable is equal to limit variable plus start here we have increased the start variable value to seven now we want to call load country data function but we want to get some time interval so we have rights at time our method would function and under this function we have right load country data function with two arguments like limit and start argument and lastly we have right one thousand so here we have you set timeout method and so it look called load country data function after one seconds of waiting of time after one seconds it will call this function and it will fetch next seven data from table and display on web page without refreshing of page so our code is ready to load dynamic data on web page on page scroll without refreshing of web page so friends you can see when we have refreshed the page and after this we have scrolled the page then you can see that please wait button and after some time it has been load next seven data so these way we have continuous scroll the page until last data you when all data has been fetched from table Dan lasted display no data found button has been displayed on webpage this type of feature has been used most of the social media site like Twitter Facebook and many more it has been low data on web page without refresh of the page this is the one type of pagination which load data on data from table and display on web page on page scroll event so friends if you like this video tutorial please share this video with your friends or even you can also share this video tutorial on social media also if you have any query regarding this tutorial please comment your query under comment box of this video if you want to get more update regarding our future video tutorial please subscribe our youtube channel thank you for watching this video

Channel: Webslesson

Views: 33,656

Keywords: jquery auto load on scroll down, load on scroll jquery, load content while scrolling with jquery php, jquery lazy load content on scroll, jquery scroll pagination ajax php, load data on scroll jquery php, load more data on scroll jquery, load data dynamically on page scroll using jquery ajax, load data while scrolling page down with jquery and php

Id: As6R1MHUNhQ

Length: 12min 56sec (776 seconds)

Published: Wed Mar 29 2017