3

Hi i am working on a ROR project with ruby 2.6.0 and Rails 5. I am using 'Masonry' to adjust my unequal height of div but its not working with endless pagination.

index.html.erb

<section class="maincontent">
    <div class="container">
        <div class="row grid-blog" id="my-posts">
            <% unless @posts.blank? %>
                <%= render 'items' %>
                    <% end %>
        </div>

        <div class="row pagination-container">
            <div class="col-md-12">
                <div class="post-navigation" id="infinite-scrolling">
                    <nav>
                        <%= will_paginate @posts %>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

_items.html.erb

<% @posts.each do |post| %>
  <div class="col-md-4">
    xyz
  </div>
<% end %>

pagination.js.coffee

jQuery ->
  if $('#infinite-scrolling').size() > 0
    $(window).on 'scroll', ->
      more_posts_url = $('.pagination .next_page').attr('href')
      if more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 80
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
        $.getScript more_posts_url
      return
    return

index.js.erb

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

custom.js

$('.grid-blog').masonry({
  itemSelector: '.col-md-4'
});

when i load the page first time masonry works fine but when i scroll down, the new elements overlaps with the old one. i also tried the 'reload' method of masonry but this also didn't work.

$('#my-posts').append('<%= j render "items" %>').masonry( 'reload' );

Please guide me how can i achieve the same. Thanks in advance :)

Mickael Lherminez
  • 679
  • 1
  • 10
  • 29
awsm sid
  • 595
  • 11
  • 28
  • where are you triggering reload? Basically, where did you put this: `$('#my-posts').append('<%= j render "items" %>').masonry( 'reload' );` ? – draganstankovic Dec 28 '19 at 17:58
  • inside index.js.erb where it's append the records of pagination. – awsm sid Dec 29 '19 at 07:34
  • essentially that call needs to be after the load of new posts on scroll and I wonder if this is actually executed after that. Can you add simple logging and see if that is actually true. I would add those within your coffee file around `$.getScript more_posts_url` as well as right before your masonry('reload') is about to be called. – draganstankovic Dec 30 '19 at 19:54

0 Answers0