ruby-on-rails – will_paginate ajax with fade

发布时间：2020-12-17 03:52:11 所属栏目：百科来源：网络整理

导读：我正试图在rails中调整我的will_pagniate分页.我希望旧页面淡出,新的页面淡入. 这是我的控制器的相关部分： respond_to do |format| format.html # new.html.erb format.js { render :update do |page| page.replace 'page',:partial = 'cur_page' end } for

我正试图在rails中调整我的will_pagniate分页.我希望旧页面淡出,新的页面淡入.

这是我的控制器的相关部分：

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,afterFinish: function()

因为我看到spinner.gif开始,然后没有褪色,页面正常刷新.在我尝试添加Effect.Fade和Effect.Appear之前,我已经使用了ajax.

这是正确的方法吗？我应该把效果放在控制器中吗？

解决方法

这是我使用jQuery做的,也很好:)

将您的will_paginate帮助器视图调用放在div中

#tickets_pagination
  = will_paginate @tickets

在application.js中

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

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

在你的控制器像往常一样

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');

这里的ticket / ticket_table有一张列出所有门票的表格. partial部署在div #ticket_list_table中

希望这对你也有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!