Discussion :

[chrill]

Bonjour,

Je suis actuellement en train de créer un blog avec une architecture MVC. Je souhaite faire une sorte d'index qui affiche tous mes articles, mais à la place de mettre une pagination, j'ai décidé de faire un scroll infini avec JQuery. Le soucis c'est que j'ai quelque problème avec mon script qui au lieu de me retourner les articles au fur et a mesure du scroll, celui ci(le script) me fait une sorte d'inception de page(il m'affiche le contenu de la page plein de fois).
Même si je n'aime pas foutre des blocs de codes complet, je vais fournir quelque parti afin de comprendre mon problème

Voici ma vu qui comporte le script JQuery et l'affichage des articles (appelé post)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    $(window).scroll(function(){
        var offset = $('#container_01_block a:last').offset();
        if($(window).scrollTop()+ $(window).height() > $(window).height())
        {
            $("#loader").show();
            $.ajax({
                url : "?lastid="+ $("#container_01_block a:last").attr("id"),
 
                success : function(html)
                {
                    $("#content").append(html);
                    $("#loader").hide();
 
                }
            });
 
        }
 
    });
</script>

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
<?php
foreach ($posts as $k => $v) {
?>
    <div id="container_01_block">
        <div id="categ"><a href="<?php echo Router::url("categorie/$v->categorie_id");?>"><?php echo strtoupper($v->categorie_name);?></a></div>
        <h2><?php echo $v->name; ?></h2><br/>
        <cite>le <?php echo $v->created;?></cite> par <strong><?php echo $v->user_id;?></strong><br/>
        <?php echo $v->intro;?>
        <a id="<?php echo $v->id ?>" href="<?php echo Router::url("posts/view/id:{$v->id}/slug:$v->slug");?>">Lire la suite &rarr;</a>
    </div>
<?php
}
?>
 
    <div id="loader">
        <img src="http://www.bandedessinee.info/zone/templates/tmpl_tc/images/loading.gif" alt="loader" title="" />
    </div>

Voici le Controller avec la méthode Index qui dois récupérer le dernier id affiché:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
 
class PostsController extends Controller{
 
 
    function index(){
        $perPage = 2;
        $this->loadModel('Post');
        if (isset($this->request->lastid)) {
            $conditions = array('online' => 1, 'type' => 'post', 'id <'=>($this->request->lastid));
        }
        else{
            $conditions = array('online' => 1, 'type' => 'post');
        }
        $d['posts'] = $this->Post->find(array(
            'conditions' => $conditions,
            'limit' => '0,'.$perPage
 
        ));
        $this->loadModel('User');
        $this->loadModel('Categorie');
        foreach ($d['posts'] as $k => $v) {
            $user_name  = $this->User->findFirst(array(
                'fields' => 'login',
                'conditions' => array('id' =>$d['posts'][$k]->user_id )
            ));
            $categ_name  = $this->Categorie->findFirst(array(
                'fields' => 'name',
                'conditions' => array('id' =>$d['posts'][$k]->categorie_id )
            ));
 
            $d['posts'][$k]->categorie_name = ucfirst($categ_name->name);
            $d['posts'][$k]->user_id = ucfirst($user_name->login);
            $d['posts'][$k]->created = date('d-m-Y à H:i',strtotime($d['posts'][$k]->created));
        }
 
        $d['total'] = $this->Post->findCount($conditions);
        $d['page'] = ceil($d['total']/$perPage);
        $this->set($d);
 
    }
}

Voila j'espère avoir bien exposé mon problème est qu'une solution existe

Merci d'avance

[vrd-74]

Bonjour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($(window).scrollTop()+ $(window).height() > $(window).height())

Cette condition déclenchera une requête ajax à chaque fois que l'utilisateur scroll. Il serait plus logique de faire quelque chose en ce sens là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($("#container_01_block a:last").offset().top-$(window).height() < $(window).scrollTop())

Essaye déjà ça, et assure toi que la requête se déclenche bien uniquement quand tu scroll jusqu'au dernier article.
Si ce qui est retourné n'est toujours pas correct, il faut voir du côté du PHP (je ne l'ai pas regardé).

[Bovino]

Comme indiqué dans Les règles incontournables d'utilisation de ce forum, le code PHP auquel s'applique le code JavaScript ne sert à rien ! JavaScript travaille à partir d'une arborescence DOM, c'est à dire une structure HTML.

Sinon, on remarque quand même que tu définis des id dans une boucle foreach, tu as du coup des id dupliqués ce qui n'est pas valide : un id doit être unique dans la page (je me demande même si c'est pas pour ça qu'on appelle cela un identifiant ).

[chrill]

La requête se déclenche bien (dans la console j'ai bien le lien avec le dernier id)
Mais le soucis actuellement c'est qu'il me recharge la totalité de la page plusieurs fois au lieu de m'afficher juste les nouveaux commentaires

[chrill]

Oui je comprend bien que mon foreach fait deux fois le même travail, mais le soucis c'est qu'il me charge la totalité de la page et non pas juste les articles

[vrd-74]

En reregardant, je viens de voir ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
foreach ($posts as $k => $v) {
?>
    <div id="container_01_block">

Et ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 url : "?lastid="+ $("#container_01_block a:last").attr("id"),

Ton id "container_01_block" est dans ta boucle. Donc déjà duplicate id, puis $("#container_01_block a:last") récupére le dernier lien du premier élément container_01_block.