Symfony2 Ajax Infinite Scroll

Question

I am completely new to Symfony2 and don't understand fully routing and templating. Please help with following issue: I need to implement infinite scroll with Symfony 2 and Ajax. I have indexController that gets 10 gallery items from db. I want to get 10 more items every time I scroll down. Here is controller:

 /**
 * @Route("/", name="gallery_homepage")
 */
public function indexAction(Request $request)
{
    $em = $this->getDoctrine()
        ->getEntityManager();

    if($request->isXmlHttpRequest())
    {
        $page = $request->get('page', 1);
        $limit = 10;
        $start = $page * $limit - $limit;

        $objects = $em->createQueryBuilder()
            ->select('o')
            ->from('ObjectBundle:Object',  'o')
            ->getQuery()
            ->setFirstResult($start)
            ->setMaxResults($limit)
            ->getResult();

        $response = json_decode($objects);

        return new Response(???));
    }
    else
    {

    }
}

This is twig template

{% block body %}
<section class="container">
<ul class="printedall">
    {% for object in objects %}
        <li class="printedimgs">
            <a class="object_prints" href="object.url">
                <img src="object.imageURL"/>
            </a>
        </li>
    {% endfor %}
</ul>
</section>
{% endblock %}

What response must controller return to get 10 items from db and append them to displayed items?

This is javascript

 is_processing = false;
 last_page = false;
 function addMoreElements() {
     is_processing = true;
     $.ajax({
         type: "GET",
         //FOS Routing
         url: Routing.generate('gallery_homepage', {page: page}),
         success: function(data) {
             if (data.html.length > 0) {
                 $('.printedall').append(data.html);
                 page = page + 1;

            last_page = data.last_page;
        } else {
            last_page = true;
        }
        is_processing = false;
    },
    error: function(data) {
        is_processing = false;
    }
});
 }

 $(window).scroll(function() {
     var wintop = $(window).scrollTop(), docheight = $(document).height(),      winheight = $(window).height();

     var scrolltrigger = 0.80;
     if ((wintop / (docheight - winheight)) > scrolltrigger) {

    if (last_page === false && is_processing === false) {
        addMoreElements();
         }
     }
 });

You need to use a javascript plugin to do the pagination like an infinite scroll -> github.com/infinite-scroll/infinite-scroll — pabgaran, Commented Oct 6, 2015 at 9:50
You can achieve it without any additional plugin. Here is example can help you in AJAX related issues sgeek.org/… — Gopal Joshi, Commented Dec 7, 2016 at 4:53

Francesco Casula · Accepted Answer · 2015-10-06 10:54:28Z

You can use the Request class from your controller from which you'll know whether the request is AJAX or not. You also have to call the setFirstResult and setMaxResults method on your query object:

use Symfony\Component\HttpFoundation\Response;

// ...

public function indexAction(Request $request) {
    if ($request->isXmlHttpRequest()) {
        //~ Is AJAX Request

        $offset = $request->get('offset');
        $limit = $request->get('limit');

        $em = $this->getDoctrine()
            ->getEntityManager();

        $objects = $em->createQueryBuilder()
            ->select('o')
            ->from('ThreedBundle:Threedobject',  'o')
            ->where('o.status = 2 AND o.showGallery = 1')
            ->getQuery()
            ->setFirstResult($offset)
            ->setMaxResults($limit)
            ->getResult();
    } else {
        //~ Request is not AJAX
    }
}

For the infinite scroll you can use any jquery infinite scroll plugin:

e.g. http://infiniteajaxscroll.com/examples/basic/page1.html

Collectives™ on Stack Overflow

Symfony2 Ajax Infinite Scroll

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related