[ SMVC 2.2] Infinite Scroll



General 1 year ago by thibaut

Hello,

I use SMVC Framework 2.2 and i want to make an Infinite Scroll pagination but i can't do it. Have you an idea or example to help me ?

Regards and sorry for my bad english.

Thibaut




1 year ago by thibaut

Hi Dave,

Thanks for your reply.

I have tested but i have a little bug. Next page are loaded multiples times :

You can see here : http://code.peinturevoiture.fr/the-wall.html

I think i have a problem my Controller Code, but I do not know where.

public function index() {

        $data['title'] = 'Couleur Voiture : Le mur de teintes automobiles';
        $data['meta_description'] = 'Trouvez facilement la couleur de vos rêves grâce au mur de teintes PeintureVoiture.fr ! Métallisée, Nacrée ou Opaque, choisissez la couleur qui vous plait.';

        $data['js'] = "
        <script src='http://code.peinturevoiture.fr/app/templates/codepeinture/js/jquery.js' type='text/javascript'></script>
        <script type='text/javascript'>
            var page = 2;
            $(document).ready(function() {
                var w = $(window);
                w.scroll(function() {
                    if ($(document).height() - w.height() == w.scrollTop()) {
                        $('.loading').show();
                        $.get('pagination', {p: page}, function(data, textStatus, xhr) {
                            page++;
                            $('.cls-scroller').append(data);
                            $('.loading').hide();
                        });
                    }
                });
            });
        </script>
        ";

        $data['teintes'] = $this->mur->getAllTeintesScrollPage();

        View::renderTemplate('header', $data);
        View::render('mur/mur', $data);
        View::renderTemplate('footer', $data);    

    }

    public function pagination() {

        if (!empty($_GET['p'])) {

            sleep(1);
            $pages = new Paginator(36, 'p');
            $data['teintes'] = $this->mur->getAllTeintesLimit($pages->getLimit());
            $data['count_results'] = count($this->mur->getAllTeintes());
            $pages->setTotal($data['count_results']); // Count Nb of Results
            $data['pageLinks'] = $pages->pageLinks(); // Display Page Links

            foreach($data['teintes'] as $teinte):
                echo '<div class="col-xs-6 col-md-2" style="height: auto">';
                    echo '<a href="">';
                        if($teinte->teinte_image != NULL):
                            echo '<center><img src="'.DIR.IMG_TEINTES.'moyennes/'.$teinte->teinte_image.'" /></center>';
                        else:
                           echo '<center><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=X&w=120&h=81&txttrack=0" /></center>';
                        endif;
                        echo '<p class="text-center mobileoverflow">'.$teinte->color.' - '.$teinte->description.'</p>';
                    echo '</a>';
                echo '</div>';
            endforeach;

            exit;
        }
    }

Thanks for your help.

Thibaut



1 year ago by LuckyCyborg

@THIBAUT

When you do infinite scroll, forget about the shipped Paginator (which do the classic "paged" pagination), and you should handle the things yourself.

Secondly, usually when you do infinite scroll, the AJAX requests information from site via POST method, while you mess royally with the implicit Paginator and GET.

BTW, if you develop a new site, why you do not use the Nova 3 instead, which is today about 200 stable versions later than SMVC 2.2?

Bear in mind this number: 200


Login to reply.