Question

我正试图在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, { duration: 0.3, afterFinish: function()

因为我看到spinner.gif start，然后没有淡入淡出，页面正常刷新。在我尝试添加Effect.Fade和Effect.Appear之前，我已经使用了ajax。

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

Answer 1

以下是我使用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, 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');

此处tickets/ticket_table有一个列出所有票证的表格。部分以div #ticket_list_table

呈现

希望这对你也有用。

Answer 2

我尝试将更多工作放入javascript助手：

respond_to do |format|
  format.html # new.html.erb
  format.js {
    render :update do |page|
      page.visual_effect :fade, 'posts', :afterFinsh => "function(){" +
      page.replace 'page', :partial => 'cur_page' +
      page.visual_effect(:appear, 'branches') + "}"
    end
  }
  format.xml  { render :xml => @branch }
end

然后删除了这部分javascript：

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

我得到了我想要的效果，但一切都没有了。请求完成，html被替换，然后 div淡出然后重新出现！

Answer 3

不熟悉RoR，它是否会生成自己的客户端JS，可能会与您的代码作斗争？

如果没有，我会说问题出在您自己的客户端代码中。为了测试，从锚标记中删除HREF属性，并将URL作为字符串文字放在Ajax请求中。如果没有任何反应，Ajax请求本身就会出现问题。如果页面按预期加载，则原始方案中的事件未完全停止。

另外，为了确保在需要的地方使用行结束的分号，清理你的JS。

Answer 4

你好像混淆了一些东西。您可以撰写$('posts').fade或new Effect.fade('posts')。

其次，我似乎无法在documentation中找到afterFinish选项。

所以我会建议以下几点：

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

希望这有帮助。

will_paginate ajax with fade

4 个答案: