This article will show you to how load contents or data dynamically on window scroll like Twitter, Facebook, g+ and much more. Many websites which has more length contents to show users will use this module to avoid page loading time and display the contents dynamically to users without taking too much loading time. We can see it in Twitter, Facebook, Google Images etc., when we scroll down the page the rest of contents will be loaded automatically. Its is using for avoid the loading time and reduce the server pulling time.

This simple steps will pull data from the server easily.

Create database connection file called ‘library.php’:

<?php
mysql_connect("localhost", "root", "root") or die ("Oops! Server not connected"); // Connect to the host
mysql_select_db("demo") or die ("Oops! DB not connected"); // select the database
?>

Create and design view file called ‘index.php’:

<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<style>
.as_wrapper{
    margin:0 auto;
    width:500px;
    font-family:Arial;
    color:#333;
    font-size:14px;
}
.as_country_container{
    padding:20px;
    border:2px dashed #17A3F7;
    margin-bottom:10px;
}
</style>

Add this jQuery function for load the contents on window scroll function:

$(document).ready(function(){   
    $(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
        var WindowHeight = $(window).height(); /* get the window height */
        if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
            $("#loader").html("loading"); /* displa the loading content */
            var LastDiv = $(".as_country_container:last"); /* get the last div of the dynamic content using ":last" */
            var LastId  = $(".as_country_container:last").attr("id"); /* get the id of the last div */
            var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */
            $.ajax({ /* post the values using AJAX */
            type: "POST",
            url: "getdata.php",
            data: ValueToPass,
            cache: false,
                success: function(html){
                    $("#loader").html("");
                    LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
                }
            });
        }
    });
});

After the section display the contents dynamically from DB with a limit:

<div>
    <h1>Window on scroll load contents in php mysql jquery using simple jQuery bootstrap module</h1>
    <?php
    $country_select = mysql_query("SELECT * FROM `countries` ORDER BY country_id DESC LIMIT 10");
    while($fetch = mysql_fetch_array($country_select)){
    ?>
    <div id="<?php echo $fetch["country_id"]; ?>"> <!-- set the mysql row id or primary key value as div id here -->
        <table>
        <tr>
            <td style="width:300px;"><?php echo $fetch["country_name"]; ?></td>
            <td><img src="country_flags/<?php echo $fetch["country_code"]; ?>.png" alt="<?php echo $fetch["country_code"]; ?>" title="<?php echo $fetch["country_code"]; ?>" /></td>
        </tr>
        </table>
    </div>
    <?php 
    }
    ?>
    <div id="loader"></div>
    <div id="divResult"></div> <!-- here the rest of contents will display dynamically -->
</div>

Finally the index file will be like this:

<?php
/**
Simple bootstrap using php mysql jquery  for more tutorials visit : http://www.bhaveshkhanpara.wordpress.com
for 
**/
include 'library.php'; // include the database and server connection file
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple jQuery PHP MySql bootsrap module by bhaveshkhanpara.wordpress</title>
<meta name="keywords" content="boostrap in jquey, on scroll load data in php mysql, simple jQuery bootstrap"/>
<meta name="description" content="window on scroll load contents using php, mysql, jquery a simple bootsrap module in jQuery"/>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style>
.as_wrapper{
margin:0 auto;
width:500px;
font-family:Arial;
color:#333;
font-size:14px;
}
.as_country_container{
padding:20px;
border:2px dashed #17A3F7;
margin-bottom:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
var WindowHeight = $(window).height(); /* get the window height */
if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
$("#loader").html("<img src='loading_icon.gif' alt='loading'/>"); /* displa the loading content */
var LastDiv = $(".as_country_container:last"); /* get the last div of the dynamic content using ":last" */
var LastId  = $(".as_country_container:last").attr("id"); /* get the id of the last div */
var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */
$.ajax({ /* post the values using AJAX */
type: "POST",
url: "getdata.php",
data: ValueToPass,
cache: false,
success: function(html){
$("#loader").html("");
LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
}
});
}
});
});
</script>
</head>

<body>
<div>
<h1>Window on scroll load contents in php mysql jquery using simple jQuery bootstrap module</h1>
<?php
$country_select = mysql_query("SELECT * FROM `countries` ORDER BY country_id DESC LIMIT 10");
while($fetch = mysql_fetch_array($country_select)){
?>
<div id="<?php echo $fetch["country_id"]; ?>"> <!-- set the mysql row id or primary key value as div id here -->
<table>
<tr>
<td style="width:300px;"><?php echo $fetch["country_name"]; ?></td>
<td><img src="country_flags/<?php echo $fetch["country_code"]; ?>.png" alt="<?php echo $fetch["country_code"]; ?>" title="<?php echo $fetch["country_code"]; ?>" /></td>
</tr>
</table>
</div>
<?php
}
?>
<div id="loader"></div>
<div id="divResult"></div> <!-- here the rest of contents will display dynamically -->
</div>
</body>
</html>

Finally create ‘getdata.php’ file to POST and get the rest of the contents from DB:

<?php
include 'library.php'; // include the library filr
if(isset($_POST["lastid"]) && $_POST["lastid"] != "0"){
$lastid = $_POST["lastid"]; // save the posted value in a variable
$country_select = mysql_query("SELECT * FROM `countries` WHERE country_id < '$lastid' ORDER BY country_id DESC LIMIT 10");
while($fetch = mysql_fetch_array($country_select)){
?>
<div id="<?php echo $fetch["country_id"]; ?>">
<table>
<tr>
<td style="width:300px;"><?php echo $fetch["country_name"]; ?></td>
<td><img src="country_flags/<?php echo $fetch["country_code"]; ?>.png" alt="<?php echo $fetch["country_code"]; ?>" title="<?php echo $fetch["country_code"]; ?>" /></td>
</tr>
</table>
</div>
<?php
}
}
?>

When the page runs, the jquery will get the last div’s ID which was the mysql row’s id and post it to the getdata.php file each time when user scrolls to the bottom of the page. In get data.php file just run the mysql query less that ‘<‘ the posted value.

NOTE : each mysql query must contain the ORDER BY ASC or DESC for continuous looping and correct resulting

Advertisements