ruby-on-rails - will_paginate ajax 淡入淡出

Question

我正在尝试在 rails 中对我的 will_pagniate 分页进行 ajaxify。我想让旧页面淡出，新页面淡入。

这是我的 Controller 的相关部分:

respond_to do |format|
  format.html # new.html.erb
  format.js {
    render :update do |page|
      page.replace 'page', :partial => 'cur_page'
    end
  }
  format.xml  { render :xml => @branch }
end

上述部分:

<div id="page">
  <%= will_paginate %>
  <div id="posts">
    <%= render @posts %>
  </div>
  <%= will_paginate %>
</div>

和 application.js 的相关部分:

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        target = $('posts')
        new Effect.fade(target, { duration: 0.3, afterFinish: function()
          {
            new Ajax.Request(el.href,
            {
              method: 'get',
              onSuccess: function(){ new Effect.Appear(target, {duration:0.3})}
            })
        }})
        e.stop()
      }
    })
  }
})

脚本似乎在这一行被杀死了，

        new Effect.fade(target, { duration: 0.3, afterFinish: function()

因为我看到 spinner.gif 开始，然后没有褪色并且页面正常刷新。在我尝试添加 Effect.Fade 和 Effect.Appear 之前，我已经让 ajax 工作了。

这是解决这个问题的正确方法吗？我应该将效果放在 Controller 中吗？

Answer 1

这是我使用 jQuery 所做的并且工作也很好:)

把您的 will_paginate div 中的助手 View 调用

#tickets_pagination
  = will_paginate @tickets

在 application.js 中

$("#tickets_pagination .pagination a").live("click", function() {
  $.get("/users/?"+this.href.split("?")[1], null, null, "script");
  return false
});

上面的 javascript 将转换 #tickets_pagination 中的分页链接到ajax链接

像往常一样在您的 Controller 中

def index
  @tickets = Ticket.all.paginate({:page => params[:page], :per_page => 10 })
  respond_to do |format|
    format.js
    format.html
  end
end

现在终于在 index.js.erb

$("#tickets_list_table").fadeOut('slow');
$("#tickets_list_table").html("<%= escape_javascript(render :partial =>'tickets/tickets_table', :locals => {:tickets => @tickets}) %>");
$("#tickets_list_table").fadeIn('slow');

这里 tickets/ticket_table有一个表格，列出了所有的票。部分呈现在 div #ticket_list_table 中

希望这对你也有用。