jquery - Rails 3/Kaminari/JQuery - 加载更多按钮 : problem to display results (it loads the entire page layout and not only the partial layout)

Question

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

我从以下代码开始:

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

我发现了这个片段(来源: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

您不需要在此处更改任何内容，只需确保 Controller 响应 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 以在单击链接或其他方式时插入加载图标。 注意:我还没有测试过这个确切的实现，所以可能会有一些错误，但你应该能够明白这个想法