title: Laravel and Infinite Scroll
body: <p>I have a question about laravel pagination and infinite scroll :</p>
  
  <p>First of all, I have this :</p>
  
  <pre><code>&lt;div class="row"&gt;   
  
  &lt;div id="boxes"&gt;
  
      @forelse($duels-&gt;results as $d)
  
          &lt;div class="col-span-4 box notizy"&gt;
  
              @include('versus.versus')
  
          &lt;/div&gt;
  
  
  
      @empty
  
  
  
      @endforelse
  
  &lt;/div&gt;
  
  &lt;div class="col-span-12"&gt;
      &lt;div class="paginate text-center"&gt;
          {{$duels-&gt;links()}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As we can see, I have a div #boxes which contain divs .box .
  The pagination is set by Laravel and looks like this :</p>
  
  <pre><code>&lt;div class="col-span-12"&gt;
      &lt;div class="paginate text-center"&gt;
          &lt;div class="pagination"&gt;
              &lt;ul&gt;
                  &lt;li class="previous_page disabled"&gt;&lt;a href="#"&gt;&amp;laquo; Previous&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?page=2"&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="next_page"&gt;&lt;a href="index.php?page=2"&gt;Next &amp;raquo;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;      
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So now, I want to put an infinite scroll instead of a pagination.
  How should I do using <a href="https://github.com/paulirish/infinite-scroll" rel="noreferrer">https://github.com/paulirish/infinite-scroll</a> ?</p>
  
  <p>I stay here if you have questions !</p>
  
  <p>PS : I've tried a few things but none worked like :</p>
  
  <pre><code>    $('#boxes').infinitescroll({
      loading: {
          finished: undefined,
          finishedMsg: "&lt;em&gt;Congratulations, you've reached the end of the internet.&lt;/em&gt;",
          msg: null,
          msgText: "&lt;em&gt;Loading the next set of posts...&lt;/em&gt;",
          selector: null,
          speed: 'fast',
          start: undefined
      },
      state: {
          isDuringAjax: false,
          isInvalidPage: false,
          isDestroyed: false,
          isDone: false, // For when it goes all the way through the archive.
          isPaused: false,
          currPage: 1
      },
      debug: false,
      behavior: undefined,
      binder: $(window), // used to cache the selector for the element that will be scrolling
      nextSelector: "div.paginate li.active a",
      navSelector: "div.paginate",
      contentSelector: null, // rename to pageFragment
      extraScrollPx: 0,
      itemSelector: "div.notizy",
      animate: false,
      pathParse: undefined,
      dataType: 'html',
      appendCallback: true,
      bufferPx: 40,
      errorCallback: function () { },
      infid: 0, //Instance ID
      pixelsFromNavToBottom: undefined,
      path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
      prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
      maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
  });
  </code></pre>
  
  <p>Based on the example of the github page (and replacing what should be replace), but there's absolutely no effect doing so.</p>