Dibi Store weblog!

Aggiornare un elemento della pagina con i template RJS

Posted by Dibi Store Sun, 23 Sep 2007 12:46:00 GMT

Ajax indubbiamente migliora l'interfaccia e la user experience. In questo articolo vedremo come, grazie ai template RJS è possibile aggiornare un menu a drop-down, dopo aver inserito in modo dinamico un elemento nella lista.

L'esempio tipico lo si può trovare quando stiamo scrivendo un articolo nel nostro blog, e arrivati alla fine, scopriamo che la categoria in qui vorremmo inserirlo non è presente, e vorremmo quindi creala in maniera dinamica.

Iniziamo definendo nel controller l'azione che serve a salvare il nuovo valore nel database:

def create
  @category = Category.new(params[:manufacter])
  if @category.save
    @categories = Category.find(:all)
  end
end

Abbiamo predisposto l'azione che salverà il valore, e in caso affermativo richiamerà una variabile @categories che contiene l'elenco aggiornato delle categorie. Ora scriveremo la vista necessaria per il nostro esempio:

<span id="categorie"><label for="product_category_id">Categorie:</label>

<%= collection_select(:product, :category_id, @categories, :id, :name)  %></span>

<% form_remote_tag :url => url_for(:controller => "/categories", :action => "create") do %>
  Nuova categoria
  <%= text_field 'category', 'name' %>
  <%= submit_tag 'Crea' %>
<% end %>

Anche qui, prima abbiamo definito il menu a scelta, di cui trovate un articolo, infine abbiamo creato il form che richiama l'azione in background e crea il codice javascript. Ci manca solo il template RJS. Creiamo quindi (nella vista delle categorie) il file create.rjs, che conterrà il seguente codice:

page.replace_html 'categorie', "Categoria:
#{collection_select(:product, :category_id, @categories, :id, :name)}"

page[:categorie].visual_effect :highlight

Ecco fatto, abbiamo anche aggiunto un effetto che illumina il menu nel caso l'azione vada a buon fine. L'esempio non prevede il controllo di errori. Tuttavia se il record non viene salvato, l'utente non vedrà l'effetto high light.