I'm trying to use infinite scroll with filterrific results in a masonry object. When the photos reload, they reload in a single-file but I want the results to fill up the whole page, so I don't think the masonry is being reloaded with the infinite scroll.
profiles.js.coffee
$(window).on 'scroll', ->
if $('.pagination').length
@url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').remove()
$('#filterrific_results').append('<div>')
$('#filterrific_results div').last().load @url+' #filterrific_results', ->
if $('.next_page.disabled').length
$('.pagination').remove()
index.js.erb
<% js = escape_javascript(
render(partial: 'profiles/list', locals: { profiles: @profiles })
) %>
$("#filterrific_results").html("<%= js %>");
<% if @profiles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@profiles) %>');
<% else %>
$('.pagination').remove();
<% end %>
_list.html.haml
#filterrific_results
%div
= page_entries_info profiles
%br
.feed-jobs.feed-search{class: (profiles.any? && profiles.first.worker?) ? "feedgrid" : "feedlist"}
= render profiles
= will_paginate profiles
:javascript
$(function() {
var $container;
$container = $(".feedgrid");
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ".item",
columnWidth: 0,
gutterWidth: 0
}).masonry();
});
});
I figured this out on my own. I copied some of the code from Railscast #114 endless page http://railscasts.com/episodes/114-endless-page-revised . I included the JS code that supposedly eliminated the pagination code, but it didnt work, do I had to make a CSS div as well. There is probably a DRYer way for this.
index.js.erb
<% js = escape_javascript(render(partial: 'profiles/list', locals: { profiles: @profiles })) %>
$('#filterrific_results').append('<%= js %>');
<% if @profiles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@profiles) %>');
<% else %>
$('.pagination').remove();
<% end %>
_list.html.haml (this would be index.html.haml, if you don't partial out)
#filterrific_results
%div.hiding
= page_entries_info profiles
%br
= render profiles
%div.hiding
= will_paginate profiles
fixes.css.scss
.hiding{
display:none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.