Un scroll infini ? c’est quoi ?

Si vous ne l’avez pas remarqué, par exemple sur facebook ou twitter, on scroll et une fois en bas de la page, le contenu se charge automatiquement et bien le scroll infini c’est ça 🙂

Comment ça fonctionne ? et bien c’est tout simple 🙂

On scroll et en fonction de la position du scroll on charge le contenu en ajax.

La partie jQuery

$(document).scroll(function(){
    if (typeof stopAjax === 'undefined' ){

        if( $(document).scrollTop() >= $(document).height() - $(window).height() ){
            var condition = {};
            condition['condition'] = $( "ul li:last" ).attr('id');
            goAjax(condition);
        }

    }
});

– Dès qu’on scroll, on vérifie que la variable stopAjax est bien égale a un « undefined » pour lancer l’ajax sinon on arrête tout
– Ensuite, on teste si la position scrollTop est supérieur ou égale à la hauteur du document(le body) moins la hauteur de votre écran
– Si on entre dans la condition, on récupère l’identifiant du dernier article ajouté et on appelle la fonction

La fonction ajax

var goAjax = function(data){
    $.post( "req-scroll.php", data )
        .done(function(result) {
            if(result != ''){
                $( "ul li:last" ).after( result );
            }else{
                stopAjax = true;
            }
        })
        .fail(function() {
            console.log('error');
        });
}

– en argument le dernier identifiant ajouté (data)
– la page php qui fera la connexion à la base de données afin de récupérer les articles
– si la requête se passe bien, il faut tester si result contient du texte afin de l’ajouter à la suite sinon c’est qu’il n’y a plus d’article, donc c’est à ce moment que stopAjax entre en scène
– et évidemment il ne faut pas oublier de gérer les erreurs éventuelles (.fail)

Et maintenant ? regardons ce que contient le fichier.php

$login = 'root';
$mdp = 'root';
$host = '127.0.0.1';
$base = 'POO';

$bdd = new PDO("mysql:dbname=".$base.";host=".$host.";charset=UTF8", $login, $mdp);

$condition = ( isset($_POST['condition']) && $_POST['condition'] != "" ) ? "WHERE id < ".$_POST['condition'] : "";

$query = $bdd->prepare("SELECT * FROM articles $condition ORDER BY id DESC LIMIT 5");

$query-> execute();

$res = $query->fetchAll(PDO::FETCH_ASSOC);

foreach ($res as $article) {
    echo "<li id='".$article['id']."'>" . $article['titre']."</li>";
}

– Ici, rien de bien méchant : on se connecte à la base de données
– On vérifie si la variable $_POST[‘condition’] existe et si elle n’est pas vide : dans ce cas on configure notre condition sinon il n’y en a pas
– On met en place la requête SQL : elle récupère les 5 derniers articles créés
– On exécute la requête et on récupère les données dans un tableau ($res)
– On termine avec un foreach pour afficher le titre de l’article

Pour ce qui est du HTML

<ul>
    <?php include_once('req-scroll.php'); ?>
</ul>

– On met en place l’ouverture et la fermeture de la balise ul
– Et on ajoute le fichier.php

De base, au chargement de la page, les 5 derniers articles seront dans la balise ul et une fois qu’on sera en bas de la page, les 5 suivants seront chargés etc. pour arriver au moment où il n’y a plus d’article à charger et du coup à ce moment, l’ajax s’arrêtera.