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

用户/ 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

我发现这个片段(信用:这里)试图满足我的需要:

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

用户/ 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 %>

用户/ 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来在单击链接时插入加载图标或其他任何内容.注意:我没有测试过这个确切的实现,因此可能存在一些错误,但您应该能够理解