• Load Data while Scrolling Page using jQuery and PHP

    Here, I have given code for loading data while user scrolls page with jquery and php.

    Step 1 :

    Database Table :

    View Code MYSQL
    1
    2
    3
    
    CREATE TABLE messages(
    mes_id INT PRIMARY KEY AUTO_INCREMENT,
    msg TEXT);

    Step 2 :
    Create php file with “load_data.php” name. Copy below code and paste.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
    <?php
    include('config.php');
    $last_msg_id=$_GET['last_msg_id'];
    $action=$_GET['action'];
     
    if($action <> "get")
    {
    ?>
     
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    function last_msg_funtion()
    {
    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()){
    last_msg_funtion();
    }
    });
    });
    </script>
    </head>
    <body>
    <?php
    include('load_first.php'); //Include load_first.php
    ?>
    <div id="last_msg_loader"></div>
    </body>
    </html>
    <?php
    }
     
    else
    {
    include('load_second.php'); //include load_second.php
    }
    ?>

    Step : 3

    create php file with “load_first.php” name. Copy below code and paste.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    <?php
    $sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
    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
    } 
    ?>

    Step : 4

    Create php file with “load_second.php” name. Copy below code and paste.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <?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 5");
    $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
    } 
    ?>

    Step : 5

    Copy below code and paste.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    
    body
    {
    font-family:'Georgia',Times New Roman, Times, serif;
    font-size:18px;
    }
    .message_box
    {
    height:60px;
    width:600px;
    border:dashed 1px #48B1D9;
    padding:5px ;
    }
    #last_msg_loader
    {
    text-align: right;
    width: 920px;
    margin: -125px auto 0 auto;
    }
    .number
    {
    float:right;
    background-color:#48B1D9;
    color:#000;
    font-weight:bold;
    }

Comments on this post

Leave a Reply

  • Security Code :


    × seven = 63