title: Symfony2 Ajax Infinite Scroll
body: <p>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:</p>
  
  <pre><code> /**
   * @Route("/", name="gallery_homepage")
   */
  public function indexAction(Request $request)
  {
      $em = $this-&gt;getDoctrine()
          -&gt;getEntityManager();
  
      if($request-&gt;isXmlHttpRequest())
      {
          $page = $request-&gt;get('page', 1);
          $limit = 10;
          $start = $page * $limit - $limit;
  
          $objects = $em-&gt;createQueryBuilder()
              -&gt;select('o')
              -&gt;from('ObjectBundle:Object',  'o')
              -&gt;getQuery()
              -&gt;setFirstResult($start)
              -&gt;setMaxResults($limit)
              -&gt;getResult();
  
          $response = json_decode($objects);
  
          return new Response(???));
      }
      else
      {
  
      }
  }
  </code></pre>
  
  <p>This is twig template </p>
  
  <pre><code>{% block body %}
  &lt;section class="container"&gt;
  &lt;ul class="printedall"&gt;
      {% for object in objects %}
          &lt;li class="printedimgs"&gt;
              &lt;a class="object_prints" href="object.url"&gt;
                  &lt;img src="object.imageURL"/&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      {% endfor %}
  &lt;/ul&gt;
  &lt;/section&gt;
  {% endblock %}
  </code></pre>
  
  <p>What response must controller return to get 10 items from db and append them to displayed items?</p>
  
  <p>This is javascript</p>
  
  <pre><code> 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 &gt; 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)) &gt; scrolltrigger) {
  
      if (last_page === false &amp;&amp; is_processing === false) {
          addMoreElements();
           }
       }
   });
  </code></pre>