Rheinwerk Computing :: Ruby on Rails 2

5.13 Ajax

Wenn wir in unserer Bookmarkverwaltung einen neuen Bookmark hinzufügen möchten, müssen wir erst das Formular zum Anlegen eines Bookmarks aufrufen und abschicken. Dann wird wieder die Index-Seite geladen, die auch den neuen Eintrag enthält. Das heißt, es kommt zweimal zu einem Seitenaufbau, nur um einen Bookmark hinzuzufügen. Das geht zwar heutzutage recht schnell, aber trotzdem wirkt es unkomfortabel.

Kein neu laden der Seite

Praktisch wäre doch, wenn nach der Anmeldung unterhalb der Liste aller angelegten Bookmarks ein Formular angezeigt würde, über das wir den Titel und die URL eines neuen Bookmarks eingeben könnten, und wenn wir dieses Formular abschicken, wird der neue Eintrag am Ende der Bookmarkliste hinzugefügt, ohne dass sich die Seite neu lädt. So, dass sich das Anlegen eines neuen Bookmarks wie eine Desktopanwendung verhalten würde. Das können wir mit Ajax lösen.

Einbinden von JavaScript-Bibliotheken für Ajax

Die zugrunde liegende JavaScript-Bibliothek (prototype.js) wird beim Generieren eines Rails-Projektes zusammen mit anderen JavaScript-Bibliotheken im Verzeichnis public/javascripts automatisch mitgeneriert.

Die prototype.js wird über den Helper javascript_include_tag in der application.html.erb eingebunden:

Listing app/views/layouts/application.html.erb

<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" >
  <title>Favoritenverwaltung - <%= @title %></title>
  <%= stylesheet_link_tag 'global' %>
  <%= javascript_include_tag :defaults %>
</head>

:defaults

Durch Übergabe des Parameters :defaults werden alle automatisch mitgenerierten JavaScript-Dateien geladen. Wenn man nur eine Datei laden möchte, kann man statt :defaults den gewünschten Dateinamen übergeben. Wenn Sie sich den HTML-Code der Index-Seite, nachdem Sie sie neu geladen haben, ansehen, sehen Sie den Code, den der Helper erzeugt:

<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" >
  <title>Favoritenverwaltung - liste</title>
  <link href="/stylesheets/global.css?1179424417"
  media="screen" rel="Stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/effects.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/dragdrop.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/controls.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/application.js?1179233115"
  type="text/javascript" ></script>
</head>

Ajaxbasierte Formulare

Formular einbinden

Wir wollen direkt, nachdem wir uns angemeldet haben, den Titel und die URL eines neuen Bookmarks über ein Formular unterhalb der Liste eingeben können. Dazu müssen wir das Formular in die index.html.erb einfügen. Da wir das Formular in ein Partial auslagern, binden wir in der index.html.erb das Partial ein:

Listing app/views/bookmarks/index.html.erb

<% @title = "liste" %>
<h2>Liste der Favoriten</h2>
<ul id= "bookmarks">
  <%= render :partial => @bookmarks %>
</ul>
<% if admin? %>
  <p>
    <%= render :partial => "ajax_form" %>
  </p>
<% end %>

Das ul -Tag für die Liste haben wir mit der ID bookmarks versehen, da wir mit Ajax auf das Element zugreifen. Unser Ziel ist es ja, per Ajax weitere Listenelemente zu der Liste hinzuzufügen.

remote_form_for

Anschließend legen wir im Verzeichnis app/views/bookmarks die Datei _ajax_form.html.erb an. Zum Anlegen des Formulars nutzen wir den Helper remote_form_for, der dafür sorgt, dass über JavaScript ein Ajax-Aufruf erfolgt. Da wir über dieses Formular einen Bookmark hinzufügen möchten, müssen wir im Bookmarks-Controller die Action create mit der HTTP-Methode POST aufrufen. Das heißt, wir senden das Formular an die bookmarks_url:

Listing app/views/bookmarks/_ajax_form.html.erb

<% remote_form_for :bookmark, :url => bookmarks_url do |f| %>
<p>
  <label for="bookmark_title" >Titel</label>
  <%= f.text_field :title %>
  <%= error_message_on(:bookmark, :title)%>
</p>

<p>
  <label for="bookmark_url" >URL</label>
  <%= f.text_field :url %>
  <%= error_message_on(:bookmark, :url)%>
</p>

<p>
  <%= submit_tag "hinzufügen" %>
</p>
<% end %>

Jetzt wird nach dem Log-in auf der Index-Seite unser Formular angezeigt:

Hier klicken, um das Bild zu vergrößern

Abbildung Ajax-Formular

Ajax im Controller

Anpassungen

Damit das Formular auch funktioniert, müssen wir noch einige Anpassungen im Controller vornehmen. Die Formulardaten werden im Controller an die Action create gesendet. Diese erzeugt aus den Formulardaten ein neues Bookmarks-Objekt. Wenn das Bookmarks-Objekt erfolgreich gespeichert werden kann, wird eine Flash-Meldung ausgegeben, und es erfolgt eine Weiterleitung auf die Index-Seite mit der Liste aller Bookmarks, die dann den neuen Eintrag enthält:

Listing app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    flash[:notice] = "Favorit wurde erfolgreich angelegt."
    redirect_to bookmarks_path
  else
    render :action => "new"
  end
end

Fallunterscheidung

In der Abfrage, ob das Bookmarks-Objekt gespeichert werden konnte, benötigen wir jetzt eine Fallunterscheidung. Denn wenn die Daten per Ajax, also über ein JavaScript, gesendet werden, müssen wir uns anders verhalten, als wenn die Daten über das HTML-Formular gesendet werden. Eine solche Fallunterscheidung haben wir schon in der Action show für die Ausgabe der Daten im HTML- oder XML-Format kennengelernt.

Wir setzen also wieder die Methode respond_to ein und unterscheiden zwischen den beiden Formaten html und - für den Fall, dass die Daten über das Ajax-Formular gesendet wurden - js.

Listing app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    respond_to do |format|
      format.html do
        flash[:notice] = "Favorit wurde erfolgreich angelegt."
        redirect_to bookmarks_path
      end
      format.js do
        render :update do |page|
          page.insert_html :bottom, 'bookmarks',
          :partial => 'bookmark'
        end
      end
    end
  else
    render :action => "new"
  end
end

HTML

Im Falle von HTML soll das ausgeführt werden, was bis jetzt auch ausgeführt wurde, wenn das Bookmarks-Objekt gespeichert werden konnte.

JavaScript

Im Falle der JavaScript-Anfrage ist es ja so, dass das Ajax-Formular unterhalb der Liste aller Bookmarks dargestellt wird und nach dem Absenden des Formulars der neue Eintrag am Ende der Liste hinzugefügt werden soll, ohne dass sich die Seite neu aufbaut. Die Listeneinträge selbst haben wir in das Partial _bookmark.html.erb ausgelagert. Das heißt, wir aktualisieren die Liste »bookmarks«, indem wir mit dem Befehl

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'

einen Listeneintrag hinzufügen.

Hier klicken, um das Bild zu vergrößern

Neuer Eintrag über ein Ajax-Formular

RJS-Templates

Highlighting mit visual_effect

Da der neue Bookmark der Liste hinzugefügt wird, ohne dass sich die Seite neu aufbaut, könnte der User das leicht übersehen und im ersten Moment das Gefühl haben, dass das Hinzufügen nicht funktioniert hat. Um dem User ein deutliches visuelles Feedback zu geben, dass etwas auf seine Eingabe hin passiert ist, wird gerne im Zusammenhang mit Ajax ein Highlighting verwendet, das den Hintergrund des neuen Elementes kurz aufleuchten lässt. Der Einfachheit halber werden wir zunächst den Hintergrund der gesamten Liste aufleuchten lassen. Dazu gibt es in Rails die Methode visual_effect, der wir den gewünschten Effekt und den Namen des Elementes übergeben:

Listing app/controllers/bookmarks_controller.rb

...
format.js do
  render :update do |page|
    page.insert_html :bottom, 'bookmarks',
		     :partial => 'bookmark'
    page.visual_effect :highlight, 'bookmarks'
  end
end
...

Wenn Sie jetzt einen neuen Bookmark über das Ajax-Formular hinzufügen, leuchtet nach dem Absenden des Formulars die Liste der Bookmarks kurz auf.

create.js.rjs

Bevor wir uns darum kümmern, dass nur der neu hinzugefügte Eintrag in der Liste aufleuchtet, sollten wir uns um etwas anderes kümmern. Der Code zum Hinzufügen eines neuen Eintrags und zum Highlighten der Liste ist Ruby-Code, der in JavaScript umgewandelt wird. Dafür gibt es ein spezielles Ruby-JavaScript-Template-Format (rjs), das heißt, wir können diesen Code auslagern. Dazu legen wir im Verzeichnis app/views/bookmarks die Datei create.js.rjs an und fügen den Code zum Erzeugen des neuen Listeneintrages und zum Highlighten der Liste ein:

Listing app/views/bookmarks/create.js.rjs

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'
page.visual_effect :highlight, 'bookmarks'

Im Bookmarks-Controller können wir alle Befehle löschen, die bis jetzt ausgeführt wurden, wenn das Ajax-Formular an die Action create geschickt wurde, da das Rendern des gleichnamigen rjs -Templates automatisch erfolgt:

Listing app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    respond_to do |format|
      format.html do
        flash[:notice] = "Favorit wurde erfolgreich angelegt."
        redirect_to bookmarks_path
      end
      format.js
    end
  else
    render :action => "new"
  end
end

Zugriff über Element-ID

Wenn wir nur den über das Ajax-Formular neu hinzugefügten Eintrag, also das letzte Element der Liste, aufleuchten lassen wollen, müssen wir auf dieses Element zugreifen können. Da das alles über JavaScript läuft, heißt das, dass das Element eine ID haben muss. Das heißt wiederum, dass jedes Element der Liste eine ID haben muss. Also müssen wir in unserem Partial _bookmark.html.erb jedem li -Element eine eindeutige ID zuweisen. Dazu nutzen wir die bookmark.id jeden Elements:

Listing app/views/bookmarks/_bookmark.html.erb

<li id = "bookmark-<%= bookmark.id %>">
...

IDs im HTML-Code

Wenn wir die Index-Seite aktualisieren und uns den HTML-Code anschauen, sehen wir, dass jedes Element der Liste jetzt eine eindeutige ID hat, die sich aus dem Wort »bookmark« und der ID des Bookmarks zusammensetzt:

Listing HTML-Code index.html.erb

...
<ul id="bookmarks" >
<li id = "bookmark-1">
...
</li>
<li id = "bookmark-2">
...
</li>
</ul>
...

Auf diese IDs können wir jetzt zugreifen. Das bedeutet für unser Highlighting in der Datei create.js.rjs:

Listing app/views/bookmarks/create.js.rjs

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'

page.visual_effect :highlight, "bookmark-#{@bookmark.id}"

Jetzt leuchtet nur noch das neu hinzugefügte Element in der Liste auf.

Damit haben wir auch einen Ajax-Aufruf durchgeführt, und unsere Bookmarkverwaltung ist dadurch etwas komfortabler in der Bedienung geworden. Man könnte Ajax auch für das Löschen und Ändern eines Bookmarks einsetzen. Beim Ändern könnte sich zum Beispiel ein Bereich mit den zu ändernden Daten ausklappen. Da sind Ihrer Phantasie keine Grenzen gesetzt.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.