will_paginate ajax с исчезновением

Question

Я пытаюсь изменить мою нумерацию 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, а затем нетисчезает и страница обновляется нормально.У меня работает ajax до того, как я попытался добавить Effect.Fade и Effect.Appear.

Это правильный путь?Должен ли я вместо этого поместить эффекты в контроллер?

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

Вы, кажется, немного перепутали вещи. Либо вы пишете $('posts').fade или new Effect.fade('posts').

Во-вторых, я не могу найти вариант 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();
  }
})

Надеюсь, это поможет.

Answer 4

Не очень хорошо знаком с RoR, генерирует ли он собственный JS на стороне клиента, который, возможно, борется с вашим кодом?

Если нет, я бы сказал, что проблема где-то в вашем клиентском коде. Для тестирования избавьтесь от атрибута HREF от тега привязки и поместите URL-адрес в виде строкового литерала в запросе Ajax. Если ничего не происходит, возникает проблема с самим запросом Ajax. Если страница загружается должным образом, событие в исходном сценарии не останавливается полностью.

Кроме того, немного очистите свой JS, чтобы быть уверенным, в конце нужно ставить точки с запятой в конце строки.