I used this article to create an extra upload button that appears after uploading more photos with will_paginate if there is a @ photos.next_page page. Instead, I want there to be a “upload more” button, and for this go to endless scrolling, like Instagram.
I tried unsuccessfully to add:
$(window).on 'scroll', -> url = $('.pagination .next_page a').attr('href') if $(window).scrollTop() > $(document).height() - $(window).height() - 60 $.getScript url
in a script using if / else / if when removing #load_more_photos btn.
Modify the scenarios below to achieve your goal:
**pagination.js.coffee** jQuery -> if $('#infinite-scrolling').size() > 0 $('.pagination').hide() loading_photos = false $('#load_more_photos').show().click -> unless loading_photos loading_photos = true url = $('.pagination .next_page a').attr('href') $this = $(this) $this.html("Fetching more videos...").addClass('disabled') $.getScript url, -> $this.text('More posts').removeClass('disabled') if $this loading_photos = false return **show.js.erb** $('#user-profile').append('<%= escape_javascript render :partial => "users/profile" %>'); <% if @photos.next_page %> $('.pagination').replaceWith('<%= escape_javascript will_paginate(@photos) %>'); $('.pagination').hide(); <% else %> $('.pagination, #load_more_photos').remove(); <% end %> **users.scss** #load_more_photos { display: none; margin-bottom: 20px; } **views/users/show.html.erb** <div id="user-profile"> <%= render :partial => "users/profile" %> </div> <div id="infinite-scrolling"> <center><%= will_paginate @photos %></center> </div> <% if @photos.next_page %> <div id="load_more_photos" class="btn btn-primary btn-lg"> Load More Photos </div> <% end %>
Edit: I am trying to get the following code below to work. However, the problem I'm facing right now is that the scroll keeps adding page_3 over and over again.
$(document).on('page:change', function () { if($('#infinite-scrolling').size() > 0) { $('.pagination').hide(); $('#load_more_photos').show(); $('#load_more_photos').on('click', function() { var url = $('.pagination .next_page a').attr('href'); $.getScript(url); $('#load_more_photos').hide(); $(window).on('scroll', function() { if($(window).scrollTop() > $(document).height() - $(window).height() - 60) { $.getScript(url) } }); }); } });
And another version of the code, both do the same thing by adding page_3 to the scroll again and again
$(document).on('page:change', function () { if (window.pagination_loading) { return; } if($('#infinite-scrolling').size() > 0) { $('.pagination').hide(); $('#load_more_photos').show(); $('#load_more_photos').on('click', function() { var url = $('.pagination .next_page a').attr('href'); $.getScript(url); $('#load_more_photos').hide(); $(window).bind('scroll', function() { if($(window).scrollTop() > $(document).height() - $(window).height() - 60) { window.pagination_loading = true; $.getScript(url).always(function() { return window.pagination_loading = false; }); } }); }); } });
Edit:
Wtf is... "&_=1468801707048" ?? heroku[router]: at=info method=GET path="/users/1?page=2&_=1468801707048"