使用will_paginate gem在rails 3.2.3中调用Ajax

Question

我试图用will_paginate gem实现一个Ajax调用,我发现这个指南http://ramblinglabs.com/blog/2011/11/rails-3-1-will_paginate-and-ajax这似乎是一个简单的解决方案,尽管它包括我不熟悉的coffeescript,所以如果有人有不同的解决方案,请告知..

我的代码如下

我的看法

<div class="container">
 <div class="row">
  <div id="userRecipes">
   <%= render partial: 'userrecipes' %>
 </div>
</div><!--/row-->

我的部分(userrecipes)

 <% @recipes.each do |r| %>
  <div class="span3">
   <div class="thumbnail">
    <%= image_tag r.avatar.url(:myrecipes) %>
   </div>
   <h4><%= link_to r.dish_name, r %></h4>
   <hr>
    <p><%= truncate r.description, :length => 90 %></p>
    <p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
    <p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
    <p><%= link_to "Add to favorites",  {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
   </div><!--/span3-->
   <% end %>
   <%= will_paginate @recipes %>

更新了userrecipes.js.erb文件

$('#userRecipes').html('<%= escape_javascript(render partial: 'userrecipes') %>');
$.setAjaxPagination();

CoffeeScript的

$ ->
$.setAjaxPagination = ->
$('.pagination a').click (event) ->
  event.preventDefault()
  loading = $ '<div id="loading" style="display: none;"><span><img src="/assets/loading.gif" alt="cargando..."/></span></div>'
  $('.other_images').prepend loading
  loading.fadeIn()
  $.ajax type: 'GET', url: $(@).attr('href'), dataType: 'script', success: (-> loading.fadeOut -> loading.remove())
  false

  $.setAjaxPagination()

当我单击下一个锚标记以显示下一组结果时,页面保持原样并且不显示新内容

使用控制台查看是否有任何错误我可以看到任何错误,输出是

GET http://localhost:3000/my_recipes?page=2&_=1355055997639

我错过了什么吗？或者我的userrecipes.js.erb文件是否存在问题,因为在其他Ajax示例中我看到你在渲染部分时使用的是escape_javascript？

编辑

在检查控制台中的响应时,它还显示正在加载要加载的新配方但视图中没有发生任何事情

任何指针赞赏

谢谢

Answer 1

为什么不尝试更简单的方法,使用以下内容创建一个新的帮助器(例如app/helpers/will_paginate_helper.rb):

module WillPaginateHelper
  class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
    def prepare(collection, options, template)
      options[:params] ||= {}
      options[:params]['_'] = nil
      super(collection, options, template)
    end

    protected
    def link(text, target, attributes = {})
      if target.is_a? Fixnum
        attributes[:rel] = rel_value(target)
        target = url(target)
      end

      @template.link_to(target, attributes.merge(remote: true)) do
        text.to_s.html_safe
      end
    end
  end

  def js_will_paginate(collection, options = {})
    will_paginate(collection, options.merge(:renderer => WillPaginateHelper::WillPaginateJSLinkRenderer))
  end
end

然后在您的视图中使用此标记进行ajax分页:

<%= js_will_paginate @recipes %>

请记住,分页链接将包含URL的现有参数,您可以将其排除,如下所示.这是标准的分页功能:

<%= js_will_paginate @recipes, :params => { :my_excluded_param => nil } %>

希望能解决你的问题.

说明:

Will_paginate允许您创建自己的自定义渲染器.WillPaginateJSLinkRenderer是一个自定义渲染器,这个类可以在任何地方定义,它不必在辅助模块中定义.自定义渲染器扩展标准渲染器(LinkRenderer)并仅重新定义两种方法.

该准备的方法是重写明确移除缓存克星参数,因为will_paginate创建与渲染页面时在场的所有参数的网页网址,我们不希望重用缓存克星参数.

该链接的方法是从原来的一个复制粘贴LinkRenderer源代码,而是创建了远程链接:真正使它成为一个JS resquest.

最后,js_will_paginate方法是一个标准的视图助手方法,用于调用普通的will_paginate视图助手方法,但是将自定义渲染器添加到选项中,以便使用它而不是普通的渲染器.