ruby on rails - will_paginate ajax con fade

ruby-on-rails pagination

Question

Estoy tratando de ajaxificar mi paginación de will_pagniate en rieles. Quiero que la página anterior se desvanezca y la nueva desaparezca.

Aquí está la parte relevante de mi controlador:

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

El parcial mencionado anteriormente:

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

Y la parte relevante de 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()
      }
    })
  }
})

La secuencia de comandos parece ser asesinado en esta línea,

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

porque veo el inicio spinner.gif, luego no hay desvanecimiento y la página se actualiza normalmente. Tengo el ajax funcionando antes de intentar agregar Effect.Fade y Effect.Appear.

¿Es esta la manera correcta de hacerlo? ¿Debería poner los efectos en el controlador en su lugar?

Answer 1

Esto es lo que hice usando jQuery y también funcioné bien :)

Pon tu llamada a will_paginate helper view en un div

#tickets_pagination
  = will_paginate @tickets

En application.js

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

El javascript anterior convertirá los enlaces de paginación en #tickets_pagination en enlaces ajax.

En tu controlador como de costumbre

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

Ahora finalmente en 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'');

Aquí tickets/ticket_table tiene una tabla que enumera todos los boletos. El parcial se procesa en div #ticket_list_table

Espero que esto funcione para ti también.

Answer 2

No muy familiarizado con RoR, ¿genera su propio JS del lado del cliente que posiblemente puede estar luchando contra su código?

Si no, diría que el problema está en algún lugar de tu propio código del lado del cliente. Para las pruebas, deshágase del atributo HREF de la etiqueta ancla y coloque la URL como una cadena literal en la solicitud Ajax. Si no ocurre nada, hay un problema con la solicitud de Ajax. Si la página se carga como se esperaba, entonces el evento en el escenario original no se detiene por completo.

Además, limpie un poco su JS para asegurarse, puntos y comas de punto y coma donde sea necesario.

Answer 3

Traté de poner más trabajo en los ayudantes de 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

Luego eliminó esta parte del javascript:

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

Obtengo el efecto que quiero, pero todo fuera de orden. La solicitud se completa y el html es reemplazado, luego el div desaparece y luego vuelve a aparecer.

Answer 4

Parece que mezclas las cosas un poco. O bien escribe $(''posts'').fade new Effect.fade(''posts'') o new Effect.fade(''posts'') .

En segundo lugar, no puedo encontrar la opción afterFinish en la documentación .

Entonces, sugeriría algo en las siguientes líneas:

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();
  }
})

Espero que esto ayude.