Rails 3/Kaminari/JQuery - 加载更多按钮：显示结果的问题（它加载整个页面布局，而不仅仅是部分布局）

Question

从ajax和jquery结合rails开始，我尝试在用户索引页面的底部创建一个“加载更多”链接。 我的用户索引页面应显示前 10 个用户，然后单击链接，将在用户 div 底部加载接下来的 10 个用户，等等。 我使用 Kaminari 进行分页。

我从以下代码开始：

User_controller.rb

def index
  @users = User.page(params[:page]).per(10)
end

User/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to "Load more", "#", :class => "next" %>

_user.html.erb

<div id="box">
  <%= link_to full_name(user), user %>
</div>

application.js

我找到了这个片段（信用：here）尝试满足我的需要：

function loadMore(pageNo) {
  var url = '/users?page=';
  $.get(url + pageNo, function(response) {
    $("#users").append(response);
  });
}

$(document).ready(function() {
  var currPage = 1;
  $("a.next").click(function() {
    loadMore(++currPage);
  });
});

我工作得很好，除了它加载所有页面布局接下来的结果不仅仅是我的 _user 部分中的框 div 我该如何处理这个问题？我是否必须创建一个index.js.erb（类似于：page.insert_html :bottom, :users, :partial => @users，但在jquery中，如果是这样我该怎么做）？

感谢您的帮助

Answer 1

您不需要为其创建另一个操作。我会使用不显眼的 JavaScript。尝试这样的内容：

---

User_controller.rb

您不需要在此处更改任何内容，只需确保控制器响应 js

respond_to :html, :js

User/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to_next_page @users, 'Load More', :remote => true, :id=>"load_more_link" %>
<%###  link_to_next_page is a Kaminari function that returns exactly what the name implies %>

User/index.js.erb

$('#users').append("<%= escape_javascript(render :partial => @users)%>");
$('#load_more_link').replaceWith("<%= escape_javascript(link_to_next_page(@users, 'Load More', :remote => true, :id=>'load_more_link'))%>");

---

这应该是让它工作所需的全部内容。当然，您可以添加一些 javascript 以在单击链接或其他方式时插入加载图标。 注意：我还没有测试过这个确切的实现，所以可能会有一些错误，但你应该能够明白这个想法

Answer 2

您应该为此创建一个自己的操作，与其自己的视图相关联。然后，请确保禁用布局渲染：

def more_users
  @users = User.page(params[:page]).per(10)
  render :layout => false
end