Infinite Scroll To Load More Content in Webpage Using Ajax, and Jquery

are on facebook Share on twitter Share on Share on pinterest_share e Sharing Service

Now a days in most all shopping website like flipkart or any other, you can see that product or data is loading in to website when you scroll mouse.

You want to know how its possible with PHP, well here is the simple example that how you can add infinite load content into your webpage ,

Take a look at simple code and you can also download code,

How it works

I’ve created a little plugin that allows us to accomplish our goal. Simply put the plugin checks if the user is at the bottom of the container you specify and loads more content accordingly. Then this data is sent to an ajax file which processes what posts to show.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// Check the user is at the bottom of the element if ( $ ( window ) . scrollTop ( ) + $ ( window ) . height ( ) > $ this . height ( ) && ! busy ) {        // Now we are working, so busy is true      busy = true ;        // Tell the user we're loading posts      $ this . find ( '.loading-bar' ) . html ( 'Loading Posts' ) ;        // Run the function to fetch the data inside a delay      // This is useful if you have content in a footer you      // want the user to see.      setTimeout ( function ( ) {          // This is the Ajax function                              getData ( ) ;        } , $ settings . delay ) ;   }

The key line here is

1	if ( $ ( window ) . scrollTop ( ) + $ ( window ) . height ( ) > $ this . height ( ) && ! busy )

This is basically saying, if the user scroll position is greater than the height of the element targeted, then more elements should be loaded.

What is Ajax?

Ajax is how we send data to files when an event happens in javascript. For example, when we scroll we want to send some data to another file to figure out what to do. That file is usually a PHP file which willprocess the data sent, and then you can do something like grab information from a database. So how do we do this with jQuery? Since we’re posting data, we use the $.post function. It looks a little like this:

1 2 3 4 5 6 7 8 9 10

$ . post ( 'file.php' , {        information        : 'to be sent' ,      to                  : 'file'        } , function ( data ) {        }      } ) ;

 

So in the above example we end the information (thats the bit inside the first set of curly brackets) to the file, file.php. When the information is sent it will return some information in the form of a data variable, and we can then use that data to return information to the user via Javascript.

The ajax file

The ajax file is going to have to be customized to fit your needs. All you have to do is grab some information from the MySQL database of your choice with some PHP. I have created a very basic ajax.php file that grabs information from a wordpress MySQL database and displays the content with the title and link. It looks a little like this, but it will be included with the download files in the download link above.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php   mysql_connect ( 'localhost' , 'username' , 'password' ) or die ( ) ; mysql_select_db ( 'database' ) ;   $offset = is_numeric ( $_POST [ 'offset' ] ) ? $_POST [ 'offset' ] : die ( ) ; $postnumbers = is_numeric ( $_POST [ 'number' ] ) ? $_POST [ 'number' ] : die ( ) ;   $run = mysql_query ( "SELECT * FROM content WHERE status = 'active' ORDER BY id DESC LIMIT " . $postnumbers . " OFFSET " . $offset ) ;   while ( $row = mysql_fetch_array ( $run ) ) {        $content = substr ( strip_tags ( $row [ 'content' ] ) , 0 , 500 ) ;        echo '<h1><a href="' . $row [ 'id' ] . '">' . $row [ 'title' ] . '</a></h1><hr />' ;      echo '<p>' . $content . '...</p><hr />' ;   }   ?>

 

Using the Plugin

Once you have your ajax file sorted out, its just a case of running the plugin. There are a bunch of variables you can determine, but it’s important that you define the query if you’re using the original ajax.php file listed above.

To run the plugin just upload all the files and create a container in your HTML called #content or whatever you want to call your container. Then run the plugin on that. Easy!

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$ ( document ) . ready ( function ( ) {        $ ( '#content' ) . scrollPagination ( {            nop     : 10 , // The number of posts per scroll to be loaded          offset  : 0 , // Initial offset, begins at 0 in this case          error   : 'No More Posts!' , // When the user reaches the end this is the message that is                                      // displayed. You can change this if you want.          delay   : 500 , // When you scroll down the posts will load after a delayed amount of time.                        // This is mainly for usability concerns. You can alter this as you see fit          scroll    : true // The main bit, if set to false posts will not load as the user scrolls.                        // but will still load if the user clicks.        } ) ;   } ) ;

In the download you’ll find the files necessary to do everything I’ve shown you. Since I can’t include database details you will have to supply your own which you can edit in the ajax.php file. And that’s it! Have a good day!