js.erb working locally but not in production

Question

I followed the tutorial here http://railsforbeginners.com/chapters/chapter-9-infinite-scroll/ for an infinite scrolling. The code works good locally but when I deploy it to prod. the pagination links (1 2 3 4) still show and the infinite scrolling doesn't fire. I also tried to add these files in assets.rb with no success

First of I'm using Rails 4 , my application.js looks like this

//= require jquery2
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui.min
//= require bootstrap-hover-dropdown.min
//= require bootstrap.min
//= require select2
//= require infinite_scroll
//= require turbolinks

Controller action

respond_to do |format|
      format.html
      format.js { render "visitors/index" }
end

index.js.erb

$('#my-articles').append('<%= j render @articles %>');
<% if @articles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @articles %>');
add_tweets();
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>



function add_tweets(){
  <% @articles.each do |article|%>
    handle_open_modal("<%= article.id %>");
  <%end%>

}

Answer 1

In your assets.rb

Try this line:

config.assets.precompile += ['Index.js'] 

-> Rails may only reference files by their (non ERB) asset filename

also as a matter of style you should lowercase the filename to: index.js.erb

Answer 2

Did you make sure that jQuery is loading? As suggested above by going to developers tool Network and reloading. Do your assets precompile in production environment? Make sure you have this config.serve_static_assets = true in your config/application.rb For Heroku and Rails 4 see here

Answer 3

Here is what I did to get it working using This Reference

I removed turbolinks and all it's reference

Then added this to the index.html.erb without have to use jQuery $(document).on('ready

if ($('#infinite-scrolling').size() > 0){
        $(window).on('scroll', function(){
          var more_posts_url = $('.pagination .next_page a').attr('href')
          heights = $(document).height() - $(window).height() - 500
            if(more_posts_url && $(window).scrollTop() > heights){
                $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
                $.getScript(more_posts_url)
            }
        });
    }

Then all the *.js.erb start working.

I was trying to avoid removing turbolinks but done trying to get it working with it.