TALLER 11 AJAX ON RAILS

Para que las aplicaciones Web se desarrollen con buena presentación debemos saber integrar
Ajax (que es la forma de trabajar JavaScript en forma asincrónica), que permite trabajar con
varios aspectos como las hojas de estilos CSS, interacción con el DOM, las peticiones
XMLHttpRequest. Actualiza también partes del contenido de nuestra web de manera asíncrona
y apoyándose en el lenguaje de programar JavaScript. Pero Rails cuenta con la posibilidad de
compilar archivos CoffeeScript. Este es un lenguaje de programación para mejorar la
legibilidad y con nuevas características inspiradas en lenguajes como Ruby. Él se encarga de
traducir el código CoffeScript a JavaScript.

El taller consiste en implementar una página principal con un formulario para crear nuevos
productos, y conforme los creamos visualizaremos la tabla con el producto añadido utilizando
Ajax.

Creamos un nuevo proyecto de Rails.

Generamos un scaffold así:

$ rails g scaffold producto nombre:string precio:float stock:float

Migramos :

$ rails db:migration

Cargamos la pagina de localhost:3000

Modificamos en el controlador la opción new y create quedando así
def new
@producto = Producto.new
respond_to do |format|
format.html {render :new}
format.json { render json: @producto }
format.js{}
end
end

….
def create
@producto = Producto.new(producto_params)

respond_to do |format|
if @producto.save
format.html { redirect_to @producto, notice: 'Producto was successfully
created.' }
format.json { render :show, status: :created, location: @producto }
format.js
else
format.html { render :new }
format.json { render json: @producto.errors, status:
:unprocessable_entity }
end
end

Lo único que le hemos agrado son las respuestas que se dan sobre el formato javascript.

El siguiente paso es mostrar la plantilla parcial form para agregar un nuevo producto y quitar el
enlace New Producto para ello utilizaremos AJAX. En la plantilla parcial se debe agregar
remote: true.

Al enlace añadiremos dos parámetros, un identificador css que nos servirá para tratarlo en
javascript y la opción remote con valor verdadero para que reconozca que la llamada es tipo
Ajax.

Revisamos vista index.html.erb

Y la modificamos así

Vista de index.html.erb, le agregamos

# Mostramos en un parcial los productos creados
<h1>Listado de productos</h1>
<div id="producto">
<%= render partial:"producto", collection: @productos %>
</div>
#Enlace con llamada js

<%= link_to "New Producto", new_producto_path, id:"enlace", remote: true %>

Pulsamos nuestro enlace y la atención se dirige al método new del controlador Productos
donde le indicamos que realice una respuesta a la petición tipo js, al igual que cuando le
indicamos una respuesta html el buscara la plantilla con el nombre del método seguido de la
extensión html.erb, realizaremos lo mismo y creamos new.js.erb con el siguiente código
_producto.html.erb
<div>
<%= producto.nombre %>
<%= producto.precio %>
<%= producto.stock %>
<%= link_to "Show", producto %>
<%= link_to "Edit", edit_producto_path(producto) %>
<%= link_to "Destroy", producto, {method: "delete", remote: true, data: {
confirm: "esta seguro?" }} %>
</div>

Recordemos que para pasar un colección se llamara tantas veces la plantilla parcial producto
como elementos tenga el array.

Creamos dentro de la vista otro archivo asi:

new.js.erb
$ ("#enlace") .hide() .after("<%= j render partial: "form", object:@producto
%>")
Creamos un producto

Le estamos indicando que oculte el div con el identificador enlace y después ejecute el código
incluido entre comillas. Podemos apreciar que le indicamos el alias j (escape_javascript) con el
que conseguimos que ejecute el código del parcial indicado.

Una vez en nuestra plantilla js, haremos la operación contraria a la que anteriormente hemos
implementado en la plantilla new.js.erb y añadiremos el producto a la plantilla la cual lo
inserta pasado como variable local

create.js.erb

$("#formulario").hide()
$("#enlace").show()
$("#producto") .append("<%=j render partial: "producto", locals:
{producto:@producto} %>")

En este ejemplo se muestra cómo funciona e integra la tecnología Ajax en las aplicaciones
Rails.