Rails 3 / Kaminari / JQuery – 加载更多按钮:显示结果的问题(它加载整个页面布局而不仅仅是局部布局)

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

我从以下代码开始:

User_controller.rb

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

用户/ index.html.erb

 
@users %>
"next" %>

_user.html.erb

 

的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中,如果是这样我该怎么办)?

谢谢你的帮助

您应该为此创建一个自己的操作,并与其自己的视图相关联。 然后,请务必禁用布局的渲染:

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

您不应该为它创建另一个操作。 我会使用不引人注目的JavaScript。 尝试这样的事情:


User_controller.rb

你不需要在这里改变任何东西,只要确保控制器响应js

 respond_to :html, :js 

用户/ index.html.erb

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