title: Rails & JS : Infinite Scrolling
body: <p>I've followed <a href="http://www.sitepoint.com/infinite-scrolling-rails-basics/" rel="nofollow noreferrer">this tutorial</a> to transform my index page in an infinite scrolling. </p>
  
  <p>But the result is that I have some pagination buttons instead of an infinte scrolling
  <img src="https://i.stack.imgur.com/xmyDA.png" alt="enter image description here"> </p>
  
  <p>So this is my code :</p>
  
  <pre><code>index.html.erb
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;div id="my-annonces"&gt;
       &lt;%= render @annonces %&gt;
  &lt;/div&gt;
  &lt;div id="infinite-scrolling"&gt;
       &lt;%= will_paginate %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>AnnoncesController
  </code></pre>
  
  <p>-</p>
  
  <pre><code>class AnnoncesController &lt; ApplicationController
   def index
    page_paginate = 6
    @annonces = Annonce.paginate(page: params[:page], per_page: page_paginate).order('created_at DESC')
    respond_to do |format|
     format.html
     format.js
    end
  end
  </code></pre>
  
  <p>-</p>
  
  <pre><code>index.js.erb
  </code></pre>
  
  <p>-</p>
  
  <pre><code>   $('#my-annonces').append('&lt;%= j render @annonces %&gt;');
      &lt;% if @annonces.next_page %&gt;
         $('.pagination').replaceWith('&lt;%= j will_paginate @annonces %&gt;');
      &lt;% else %&gt;
         $(window).off('scroll');
         $('.pagination').remove();
      &lt;% end %&gt;
  </code></pre>
  
  <p>-</p>
  
  <p>This js is never called, Don't now why. If I put it the the view it's called. But I don't know what the <code>.pagination</code> is ...</p>
  
  <p>-</p>
  
  <p>As he said, I've created a new file <code>pagination.js.coffee</code> inside the javascripts directory.</p>
  
  <p>-</p>
  
  <pre><code>jQuery -&gt;
   if $('#infinite-scrolling').size() &gt; 0
    console.log "AAAAA "
    $(window).on 'scroll', -&gt;
        console.log "BBBBBB "
      more_posts_url = $('.pagination .next_page a').attr('href')
        console.log "CCCCC "
      if more_posts_url &amp;&amp; $(window).scrollTop() &gt; $(document).height() - $(window).height() - 60
            console.log "DDDDD "
          $('.pagination').html('&lt;img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." /&gt;')
          $.getScript more_posts_url
      return
    return
  </code></pre>
  
  <p>-</p>
  
  <p>But this file is never called too.</p>
  
  <p>I don't have any errors in rails console, or the js console. I'm note very experienced in JS, so I'm a little bit lots.</p>
  
  <p>Any one know what the problem is ? 
  Thanks !</p>