Edición in situ con Ajax

La edición de datos in situ usando Javascript es uno de los galones que debe exhibir cualquier web moderna que se precie de ser Web 2.0 (sea esto lo que sea) En este entrada vamos a ver cómo podemos implementar un efecto parecido al que describió el otro día Fernando usando, cómo no, Ruby on Rails.

        <!--more-->

        <h4>Crear la aplicación</h4>


<p>A estas alturas, esto debería ser rutinario y bien conocido.  Creamos en primer lugar la aplicacion con </p>


<pre><code>rails prueba1</code></pre>


<p>Y configuraremos una base de datos a la que se pueda acceder en <code>config/database.yml</code>.  A continuación, crearemos el esquema e introduciremos algunos registros usando una migración, como la siguiente:</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class Inicial < ActiveRecord::Migration

  class Item < ActiveRecord::Base
  end

  def self.up
     create_table :items do |t|
             t.column :texto, :string
     end

     Item.create :texto => 'Desde la dehesa la hija del leal jefe desgaja la leña ajada'
     Item.create :texto => 'Agasajadas las hadas agasajadas'
     Item.create :texto => 'Jovencillos emponzoñados de whisky, qué figurotas exhibís?'
  end

  def self.down
  end
end

Algunos comentarios a la migración: en este ejemplo rápido no hemos implementado la marcha atrás que debería ir en self.down.

Y, más importante, no hemos sido capaces de poder crear el esquema de la tabla y de insertar tuplas en la misma migración sin la declaración dummy de la clase heredera de ActiveRecord para representar la tabla que vamos a crear.

Tras esto, generaremos el correspondiente código de andamiaje:

ruby script/generate scaffold Item

Ya podemos acceder a nuestra aplicación y ver la lista de items

AJAX for the people!

Reemplazaremos el contenido de app/views/items/show.rhtml por

1
2
3
4
5
6

        <%= javascript_include_tag :defaults %>

        <b>Texto</b> <%= in_place_editor_field :item, :texto %>

        <%= link_to 'Edit', :action => 'edit', :id => @item %> |
        <%= link_to 'Back', :action => 'list' %>

Es decir, incluimos la librería estándar de AJAX (esta inclusión en una aplicación “de verdad” la haríamos en alguna plantilla o layout global, como application.rhtml). Dado que nuestro modelo sólo tiene una columna, podemos quitar todo el andamiaje y tratar el único campo que tenemos, nombre.

in_place_editor_field :item, :texto 

Esta es la línea que hace toda la magia Javascript en la vista, que indica que queremos editar el campo texto del objeto @item que trata el formulario.

Por ultimo, debemos añadir algo de logica al controlador para tratar los nuevos métodos vivos que invocará el código Javascript. Afortunadamente, Rails nos vuelve a hacer la vida más fácil, pues basta con añadir lo siguiente a nuestra clase items_controller.rb

1
2
3
4
5
6
7
8
9
10

        class ItemsController < ApplicationController

        in_place_edit_for :item, :texto

        def index
            list
            render :action => 'list'
          end
        
        (etcetera)

La cosa en funcionamiento

Con la aplicación en funcionamiento, podemos ver cualquier elemento de nuestra lista, que tiene el mismo aspecto inocente de antes…

... pero si pulsamos sobre el texto, éste se convierte en un campo de edición….

... que al pulsar en ‘SAVE’ almacena nuestros cambios

¡Más fácil imposible!