Como eliminar registros utilizando Ajax en Rails
Publicado por Efrén Díaz 8 Noviembre 2005 en AJAX, General, How To's, JavaScript, Rails, Ruby.Cuando queremos eliminar registros y no queremos refrescar toda la página, una de las soluciones más practicas y elegantes, es utilizando AJAX, para esto lo primero que necesitamos hacer es incluír el javascript necesario en el view para que tengamos disponibles las funciones AJAX que necesitaremos, eso lo hacemos de la siguiente forma.
-
<head>
-
..
-
<%= javascript_include_tag :defaults %>
-
..
-
</head>
Si estamos utilizando un layout común para nuestros views, este código debería ir en ese layout, de lo contrario debe ir en cada uno de los layouts de los views donde vayamos a utilizarlo.
Supongamos que tenemos un view (una lista sencilla) de una tabla Animals, donde tenemos un link_to típico, que hace la eliminación del registro, refrescando toda la página.
-
<% for animal in @animals %>
-
<div>
-
<h3><%=h animal.name%></h3>
-
<p>
-
<%= link_to 'destroy', {:action => 'destroy', :id => animal}, :confirm => 'Are you sure?' %>
-
</p>
-
</div>
-
<% end %>
Lo primero que debemos hacer para disfutar de las bondades de AJAX en nuestra lista de animales, es identificar cada registro con un div, ¿Cómo hacemos esto ?, de la siguiente forma:
-
<% for animal in @animals %>
-
<div id="animal<%= animal.id%>">
-
<h3><%=h animal.name%></h3>
-
<p>
-
<%= link_to 'destroy', {:action => 'destroy', :id => animal}, :confirm => 'Are you sure?' %>
-
</p>
-
</div>
-
<% end %>
Cuando utilizamos AJAX tenemos varias formas de darle feedback al usuario indicándole que su requerimiento está siendo procesado, en este ejemplo particular, utilizaré un gif animado, al igual que el div del animal, esta imagen debe ir identificada con un id único, en este caso utilizaré el mismo animal.id , y además haré que la imagen por defecto esté oculta con un style especial (El por qué de esto lo explicaré más adelante).
-
<%= image_tag "spinner.gif", :id => 'destroy'+animal.id.to_s, :style => 'display:none;' %>
El código del view va quedando de la siguiente forma:
-
<% for animal in @animals %>
-
<div id="animal<%= animal.id%>">
-
<h3><%=h animal.name%></h3>
-
<p>
-
<%= link_to 'destroy', {:action => 'destroy', :id => animal}, :confirm => 'Are you sure?' %>
-
<%= image_tag "spinner.gif", :id => 'destroy'+animal.id.to_s, :style => 'display:none;' %>
-
</p>
-
</div>
-
<% end %>
Ahora si viene la magia, Rails tiene una serie de helpers para hacer más fácil el uso de AJAX en los views, reemplazaremos el link_to, por su homólogo AJAX, el link_to_remote . No se preocupen, explicaré esto en detalle más adelante ;) .
-
<%= link_to_remote 'destroy',
-
:url=>{
-
:controller=>"animals",
-
:action=>"destroy",
-
:id=>animal.id},
-
:loading=>"Element.show('detroy#{animal.id}')",
-
:complete=>" new Effect.Fade('animal#{animal.id}')"
-
%>
El link_to_remote, es el que se va a encargar de procesar nuestro requerimiento en el background, ahora les explico un poco los parámetros que utilicé en el ejemplo.
- :controller es el controlador que procesará nuestro requerimiento.
- :action es la acción que queremos ejecutar en el controller.
- :id es el
iddel registro que queremos eliminar. - :loading es el nombre de la función javascript que queremos ejecutar mientras se procesa el requerimiento, o como en este caso el código javascript que queremos ejecutar. ¿Recuerdan el gif animado que mencioné arriba?, bueno aquí es donde lo vamos a usar, con el
Element.show('id_del_elemento'), hacemos que aparezca nuestro gif, dando la impresión al usuario de que su requerimiento está siéndo procesado. - :complete es el nombre de la función javascript que queremos ejecutar una vez que se haya completado el requerimiento, o como en este caso, el código javascript que se quiere ejecutar (para este ejemplo se utilizó un efecto de fading, que da la impresión de que el registro se va desvaneciendo hasta que desaparece por completo).
Finalmente el código de nuestro view queda de la siguiente forma.
-
<% for animal in @animals %>
-
<div id="animal<%= animal.id%>">
-
<h3><%=h animal.name%></h3>
-
<%= link_to_remote 'destroy',
-
:url=>{
-
:controller=>"animals",
-
:action=>"destroy",
-
:id=>animal.id},
-
:complete=>" new Effect.Fade('animal#{animal.id}')",
-
:loading=>"Element.show('destroy#{animal.id}')"
-
%>
-
<%= image_tag "spinner.gif", :id => 'destroy'+animal.id.to_s, :style => 'display:none;' %>
-
</div>
-
<% end %>
Por último, modificamos el método destroy de nuestro animals_controller, reemplazando el redirect_to :action => 'list' por render_text "", esto se hace para evitar que se intente rendear el view para el método destroy.
-
def destroy
-
Blog.find(params[:id]).destroy
-
render_text ""
-
end
Ahora pueden ver porque me encanta rails, el añadir esta funcionalidad tan útil para nuestros usuarios, fué muy sencillo ( peace of cake), si tienen alguna pregunta u observación no duden en contactarme, les dejo algunos links útiles.
How to use the Ajax helpers
How to Use Element
How to make a real-time search box with the Ajax helpers
parece muy interesante, pero no podrias poner un ejemplo para ver como funciona. y si pudieras poner los archivos que utilizaste parapoder descargar.
Hola amigo tal vez podrias poner un link para ver el ejemplo en ejecucion... :) va muchas gracias por tu publicacion esta muy buena exitos...