How to adjust output data to show in table while I clicking 'Load More' button for rails-5.2 app?

99 Views Asked by At

I used 'Load More' button instead of pagination using 'will_paginate gem' in rails app. It's worked to show data by clicking of 'Load More' button. But datas are not showed in table. It's showed outside of table. I used 'will_paginate' gem and 'jquery-rails'.

photo: article index page

articles_controller.rb

    def index
        @articles = Article.paginate(:page => params[:page], :per_page => 5)
        respond_with @articles

        respond_to do |format|
            format.html
            format.js
        end
    end

articles/index.html.erb

<div class="container">  
  <h1>Listing Articles</h1>
  <%= link_to 'New article', new_article_path, class: 'btn btn-sm btn-info' %>

  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Text</th>
        <th></th>
      </tr>
    </thead>

      <div class="link-wrap">
        <%= render "articles/article", cache: true %>
      </div>  

  </table>

  <div id="without_button">
    <%= will_paginate @articles %>
  </div>

  <div class="link more">
      <%= link_to 'More Articles', articles_path(:page => @articles.next_page), class: "btn btn-primary btn-sm next_page" %>
    </div>
</div>  
articles.js.erb

$('.link-wrap').append("<%= escape_javascript(render partial: "articles/article", :locals => { :article => @articles }) %>");
<% if @articles.next_page %>
    $('.next_page').attr('href','<%= articles_path(:page => @articles.next_page) %>');
<% else %>
    $('.more').remove();
<% end %>

pagination.js.erb

$ ->
    $('#without_button').hide()
    $('#without_button form').after('<button class="btn btn-primary btn-sm disabled" style="display: none;">More users</button>')
    $('.next_page').on 'click', (e) ->
    e.preventDefault()
    url = $(this).attr('href')
    $.getScript(url)
1

There are 1 best solutions below

0
Vasiliy Novikov On

First of all i saw that you have different render methods of one file render "articles/article" and render partial: 'articles/article', locals: { article: @articles } can you provide content of that file? I think that this problem may be on that file.