我想用Kaminari创建一个"加载更多"的ajax分页.我正在使用此代码:
class BienvenueController < ApplicationController
def index
@articles = Admin::Article.page(1).per(2)
respond_to do |format|
format.html
format.js
end
end
end
# Bienvenue#index
<div class="container" style="min-width:<%= @width %>px">
<%= render "shared/articles" %>
<%= link_to_next_page @articles, 'Load More', :remote => true, :id=>"load_more_link" %>
Run Code Online (Sandbox Code Playgroud)
# Shared/articles
<% @articles.each do |a| %>
<article class="<%= a.rubrique.color %>">
<div class="sharing">
<%= image_tag "facebook-32.png" %>
</div>
<p class="color<%= a.rubrique.color %>"><i>Le <%= I18n.localize(a.created_at, :format => :long) %> par David Perrotin</i></p>
<h1><%= a.titre %></h1>
<div class="excerpt">
<%= a.chapo.html_safe %>
</div>
<div class="image">
<%= image_tag a.mainphoto.url(:medium), :width=>"100%" %>
</div>
<div class="contenu">
<%= a.contenu.html_safe %>
</div>
<div class="readmore">
<%= link_to "Continuer la lecture", article_path(a) %>
</div>
</article>
<% end %>
# index.js.erb
$('.container').append("<%= escape_javascript(render 'shared/articles')%>");
$('#load_more_link').replaceWith("<%= escape_javascript(link_to_next_page(@articles, 'Load More', :remote => true, :id=>'load_more_link'))%>");
Run Code Online (Sandbox Code Playgroud)
但问题是,当我点击"加载更多"时,它总是显示两个相同的文章,部分永远不会刷新另外两篇文章,就像我想的那样.
我刚刚遇到了一个可能对其他人有帮助的问题。根据您的 jQuery 版本,请勿replaceWith在#load_more_linkin上使用index.js.erb。
有一个回归(http://bugs.jquery.com/ticket/13401),空的replaceWith什么都不做,所以在你的集合的最后一页上,将link_to_next是空的,使得行:$('#load_more_link').replaceWith('');因此不会替换最后一个“更多”按钮,因此您将不断加载数据集的最后一页。
empty().html('...')通过更新 jQuery 版本或使用替换替换来修复。