Rails 3/Kaminari/JQuery-加载更多按钮:显示结果时出现问题(加载整个页面布局，而不仅是部分布局) [英] Rails 3/Kaminari/JQuery - load more button: problem to display results (it loads the entire page layout and not only the partial layout)

问题描述

从ajax和jquery结合rails开始，我试图在用户索引页面底部创建一个加载更多" 链接. 我的用户索引页应显示前10个用户，然后单击该链接将在用户div的底部加载后10个用户，依此类推. 我使用Kaminari进行分页.

Begin with ajax and jquery combined with rails, I am trying to create a "load more" link in the bottom of my user index page. My user index page should display the 10 first users, then clicking the link it loads the next 10 users on the bottom of the user div, etc.. I use Kaminari for pagination.

我从以下代码开始:

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

我找到了这个片段(来源:这里)尝试使其符合我的需求:

application.js

I found this snippet (credit: here) trying to fit it with my need:

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部分中的box div 我该如何处理?我是否必须创建一个index.js.erb(类似:page.insert_html:bottom，:users，:partial => @users，但在jquery中，如果可以的话，该怎么做)?

I works perfectly except it loads all the page layout with the next results not only the box div in my _user partial How can I manage this? Did I have to create an index.js.erb (something like: page.insert_html :bottom, :users, :partial => @users but in jquery, if so how can I do it)?

感谢您的帮助

推荐答案

您应该为此创建自己的操作，并将其与自己的视图相关联.然后，请确保禁用布局渲染:

You should create an own action for this, associated with it's own view. Then, be sure to disable rendering of the layout:

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

这篇关于Rails 3/Kaminari/JQuery-加载更多按钮:显示结果时出现问题(加载整个页面布局，而不仅是部分布局)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！