CODEWITHSUNDEEP
phpjquerymysql
Jaakko Uusitalo
Jaakko Uusitalo

Reputation: 705

Making more data load from database while scrolling page

I have tried to create this mobile website where you could scroll down and it would "reveal" more info blocks.

My code is currently like this:

index.php

<?php
include_once('yhteys.php');
require 'config.php';
?>


<!DOCTYPE html>
<head>
</head>
<body>
<?php

    foreach($uusiYhteys->query('SELECT otsikko, kuva, id_ryhma, id_ilmoitus, popup FROM ilmoitukset WHERE id_ryhma = 16 ORDER BY aika DESC LIMIT 0,5') as $info)
    {
        echo '<section class="rss-container">';
        echo '<p class="rss-title-small">
        <img class="rss-image-small" src="http://example.com'.$info['kuva'].'&wmax=100&hmax=100" />
        <a href="http://example.com?ryhma='.$info['id_ryhma'].'&uutinen='.$info['id_ilmoitus'].'" title="'.$info['otsikko'].'">'.$info['otsikko'].'</a></p>';    
        echo '<p class="rss-desc">'.$info['popup'].'</p>';
        echo '</section>';
        echo '<br />';
    }

    ?>

Yhteys.php has this:

$uusiYhteys = new PDO('mysql:host=000.000.00.00;dbname=example_table;charset=utf8', 'dbuser', 'dbpass') or die("You failed, go away.");

Now it only displays first 5 posts, and I would like it to display 5 more when I scroll enough down. Any guidance? Thank you.

Upvotes: 0

Views: 2323

Answers (2)

Tim Groeneveld
Tim Groeneveld

Reputation: 9019

You are going to need a bit of javascript glue on the frontend of the website to be able to achieve this functionality.

This code (with jQuery) will insert a new paragraph item at the bottom of a div called "statuses". The statuses div is where we will store all of the items.

$(document).ready(function() {
doMouseWheel = 1;
$(".statuses").after("<p id='last'></p>");

$(window).scroll(function() {
    if (!doMouseWheel)
        return;

    var distanceTop = $('#last').offset().top - $(window).height();
    if ($(window).scrollTop() > distanceTop) {
        $('#loading').show();
        doMouseWheel = 0;

        ajaxLoad();
    }
});
})

ajaxLoad() will be called when the page is scrolled down far enough.

function ajaxLoad() {

if (last_id == 0) {
    $('#loading').hide();
    doMouseWheel = 0;
    return;
}
u = "/load-requests/";
if (last_id > 0)
    u = u + "?last_id=" + last_id;
$.ajax({
    dataType: "json",
    url: u,
    success: function(j) {
        last_id = j.last_id;
        for (n = 0; n < j.statuses.length; ++n) {
            _line = _newLine(j.statuses[n]]);
            $('ul.statuses').append(_line);
        }
        $('.hide-load').hide();
        $('#loading .message').html('Fetching more items for the timeline');
        $('#loading').slideUp();
        doMouseWheel = 1;
    }
})

}

The /load-requests/ URL will output JSON similar to this:

{
    "statuses": [{
            "who": 1,
            "for": "company",
            "name": "ABC Computing",
            "id": 2,
            "status": "added a new article",
            "timez": "2008-07-17T09:24:17Z",
            "timep": "2 days ago",
            "additional": [{
                "for": "document",
                "name": "Article Name",
                "value": "What is the purpose of using infinite scroll timelines to show information",
                "id": 42
            }, {
                "name": "New Topics",
                "value": "information, javascript, javascript, development"
            }]
        },
        last_id = 3
    }
}

When the page is requested, it will have last_id set, which was the last seen item.

_newLine renders the line content as a <li> item added to a <ul>.

I use the following HTML:

<ul class="statuses">

</ul>

<div class="screen" id="loading">
    <div class="hide-load">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <img src="/articles/images/homepage.gif">
    <h1>Please wait...</h1>
    <span class="message">Generating your personalised timeline...</span>
</div>

<div class="screen" id="error">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="simplemessage error">
        <img src="/articles/images/error.png" style="vertical-align: middle;">
        <strong>There were issues attempting to load some or all of your feed.</strong><br />
        Sadly, not everything could be loaded. Sorry about that!
    </div>
</div>

Check out this jQuery plugin: http://www.infinite-scroll.com/

The code provided is based on http://www.jquery4u.com/demos/infinite-scrolling-demo5/

Upvotes: 1

Justinas
Justinas

Reputation: 43481

Use Ajax to call db functions, and in query use SELECT ... LIMIT 5 OFFSER $currentOffset + 5, fetch it as FETCH::ASSOC and return as json string (json_encode($resultsArray);). In Ajax SUCCESS function just copy existing (lets say first) block of .rss-container and replace old values with the one from Ajax call.

Upvotes: 1

Related Questions