Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Infinity Scroll with jQuery and PHP?

In this article we will see how to load data during page scrolling(infinity scroll) with jQuery and PHP.

Very often, it is difficult to load an immensely large amount of data on a single page. Not only is it inconvenient, but also, it comes with a huge drawback. Displaying all of the data can actually slow down the page loading process and thus make the page appear laggy.

So what’s the solution to this issue?

Whenever you have a large amount of data that needs to be displayed on a single page, there is a certain mechanism that can assist you in countering this negative proposition. Data loading during page scrolling is possible with the help PHP and jQuery.

As such, the task isn’t enormous and can be simply carried out by the implementation of a simple script using jQuery that limits the initial loading of a huge chunk of data, but rather, does so as the user keeps scrolling down and when reaching the limit.

This makes the entire process of page loading faster on your website and makes it easier to load the data as required.

How does it work?

When a user reaches the end of the page or section, jQuery usually implements a POST request. The return data of such a request is usually comprised of data that is older than the last data at the time of implementation of the last request.

Also, on the server side, which is based in PHP, the use of a SQL query will allow us to add less data than what is usually added during the last data id.

Which browsers can be used for this tutorial?

Mozilla Firefox, Google Chrome, Inter Explorer, Safari

We need a database table

The first step in the process is to have a database table that contains the required data and also comes with a unique id. By making use of the Auto Increment feature in the field with the Primary Key, one can easily accomplish this task.

Here’s what you can use –

 CREATE TABLE messages(
 mes_id INT PRIMARY KEY AUTO_INCREMENT,
 msg TEXT);
 

Using load_data.php

The use of the load_data.php is to allow jQuery to send the request that is responsible for the fetching of data older than the last one.

Just as we scroll down on a specific webpage, the script i.e. ($(window).scroll) automatically determines that you are at the bottom of the page and then go ahead to call the last_msg_function(). For example, if you take a look at the line of code i.e. $.post (“ “), you will get a clearer understanding on the matter, which has also been explained after the code snippet.

Listing 1: A sample load data script

 <?php
 include('config.php');
 $lastmsg_id = $_GET ['lastmsg_id'];
 $action = $_GET ['action'];
 
 if($action <> "get")
 {
 ?>
 
 <script type = "text/javascript" src="jquery.js"> </script>
 <script type = "text/javascript">
 $(document).ready(function()
 {
 function lastmsg_function() 
 { 
 var id = $(".message_box:last").attr("id");
 $('div#last_msg_loader').html(' <img src="bigLoader.gif" >');
 $.post("load_data.php?action = get & last_msg_id =" + id,
 
 function(data){
 if (data != "") {
 $(".message_box:last").after(data); 
 }
 $('div#last_msg_loader').empty();
 });
 }; 
 
 $(window).scroll(function(){
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
 lastmsg_funtion();
 }
 }); 
 });
 </script>
</head>
<body>
<?php 
 include ( 'load_first.php' ); //inclusion of load_first.php 
 ?>
<div id = "last_msg_loader"> </div>
</body>
</html>
<?php
 }
 
 else
 {
 include ( 'load_second.php' ); //inclusion of  load_second.php
 }
 ?>
 

The lastmsg_function () used in the code does the job of calling the load_data.php file and also adds the HTML data that is returned after the last data.

In the above piece of code, you can also see that the ($(window).scrollTop() == $(document).height() - $(window).height()) command has been used. Basically, this is the statement request in jQuery, which has been implemented in order to determine the scroll direction. As such, the scroll direction is determined and when the user tends to reach the bottom of the page, the expression in the statement checks for the scrolled height, and if it is found to be equal to the window height, then the loading of more data is made.

Making use of load_first.php

The following code is the PHP code that is required for the loading process of 25 rows from the message table that we have created earlier.

Listing 2: A sample first and second load PHP file

 <?php
 $sql = mysql_query ( " SELECT * FROM messages ORDER BY mes_id DESC LIMIT 25 " );
 while( $row = mysql_fetch_array($sql))
 {
 $msgID = $row ['mes_id'];
 $msg = $row ['msg'];
 ?>
 <div id = "<?php echo $msgID; ?>" class = "message_box" > 
 <?php echo $msg; ?>
</div> 
<?php
 } 
 ?>
 

Usage of load_second.php

The use of the load_second.php code is to load 8 rows lesser than last_msg_id from the message table that we have created.

 <?php
 $last_msg_id = $_GET  ['last_msg_id'];
 $sql = mysql_query ( "SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 8" );
 $last_msg_id = " ";
 while( $row = mysql_fetch_array($sql))
 {
 $msgID = $row['mes_id'];
 $msg = $row['msg']; 
 ?>
 <div id = "<?php echo $msgID; ?>" class = "message_box" > 
 <?php echo $msg; 
 ?>
</div>
<?php
 } 
 ?>
 

CSS Elements

The addition of CSS elements can be used to present the matter in a much more stylish and convenient way.

Here, we see that the message box, post number etc. have been given style elements. You can also modify this section as per your needs, in order to suit the website design.

Listing 3: A sample CSS file

 body
{
 font-family: Georgia, ‘Times New Roman’, Times, serif;
 font-size:20px;
 }
.message_box
{
 height:50px;
 width:605px; 
 border:dashed 2px #48B1D9; 
 padding:6px ;
 }
#last_msg_loader
{
 text-align: right;
 width: 915px;
 margin: -120px auto 0 auto;
 }
.number
{
 float:right; 
 background-color:#48B1D9; 
 color:#000; 
 font-weight:bold;
 } 
 

The advantages of using jQuery and PHP to load data

Using jQuery and PHP to load data can be pretty advantageous. Firstly, the process allows for dynamic loading of data in a website as the user keeps scrolling down. Also, there is no need to load all the data in a website all at once. Loading all of the data at once can be very disadvantageous as it takes plenty of time.

Therefore, the use of jQuery and PHP for the purpose of loading data during page scrolling is very fast and also simple to implement. You can go ahead and implement this feature any website that requires the feature and might have been working on.

Examples of data loading during the scrolling process

Presently, a huge number of websites are known to employ this technique for the loading of data. Some of the most common ones that you might be aware of are popular websites such as the likes of Facebook, Google+, Twitter, etc. When you reach the bottom posts in your window, data automatically starts loading, which are actually the new posts on the timeline.

Conclusion

In this article we have tried to address the data loading issue of web applications and especially when the volume of data is huge. If we load all the data in one shot, then it will slow down the application, even it can break the web page. So we need to understand different techniques to load the data gradually. One of the widely followed techniques is to load the data during page scrolling. In this process, the data is loaded and displayed phase by phase, but the user will not feel any difference. This can be implemented by using JQuery and PHP. I have explained all the code snippets to implement the solution. Hope it will help you to understand the solution.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login