Daniel Dengler
web developer
Ruby on Rails
Workshop SS 2009
„Ruby on Rails“ and the Rails-Logo are registered trademarks of David Heinemeier Hansson – www.rubyonrails.org

11
Ruby on Rails
AJAX

AJAX
asynchronous JavaScript and XML

Verwendung
Dynamische GUI ähnliche Anwendungen oft mit
den Zielen die Serverlast zu reduzieren und die
Usability zu steigern.
Technologien:
• JavaScript
• XML

Browser Server
Seite anfragen

Browser Server
Seite anfragen
Seite generieren

Browser Server
Seite anfragen
Seite generieren
Seite anzeigen

Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten

Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
AJAX-Anfrage

Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
AJAX-Anfrage
Skripte oder Daten
generieren

Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
AJAX-Anfrage
Skripte oder Daten
Antwort auswerten generieren
(Skripte ausführen,
Inhalte ändern)

Der Rails-Ansatz
Das Modul JavascriptHelper in Rails kapselt die
Generierung von JavaScript in Ruby-Code. Daher
muss für die einfache Verwendung von AJAX in Rails
kein eigener JavaScript-Code geschrieben werden
Mitgelieferte Bibliotheken:
• Prototype (Core)
• Effects, DragDrop, Controls

Bibliotheken einbinden
Im jeweiligen Layout im Head Bereich anzugeben:
<%= javascript_include_tag :defaults %>
Lädt die Bibliotheken im Browser

Elemente eindeutig bezeichnen
• Elemente die später manipuliert werden sollen,
müssen eindeutig identi zierbar sein.
• Einfachste Lösung: ElementIDs in das generierte
HTML Dokument aufnehmen

Elemente eindeutig bezeichnen
<% content_tag_for(:tr, task) do %>
<td> TabellenZellen </td> ...
<% end %>
# Generiert:
<tr class="task" id="task_33"> ... </tr>

AJAX Links
<%= link_to_remote "Destroy",
:url => project_path(@project),
:con rm => 'Are you sure?',
:method => :delete %>
Erstellt einen „JavaScript“ Link, der einen AJAX Aufruf
startet. Das Ergebnis des Aufrufes wird ausgewertet
und die Seite entsprechend verändert.

AJAX Formulare
<% remote_form_for(@project) do |f| %>
FORMULARELEMENTE
<% end %>
Erstellt ein „JavaScript“ Formular, das einen AJAX
Aufruf startet. Das Ergebnis des Aufrufes wird
ausgewertet und die Seite entsprechend verändert.

Die Antwort
# DELETE /tasks/1
# DELETE /tasks/1.xml
# DELETE /tasks/1.js
def destroy
@task = Task.find(params[:id])
@task.destroy
respond_to do |format|
format.html { redirect_to(project_tasks_url(@project)) }
format.js
format.xml { head :ok }
end
end

Die Antwort
respond_to do |format|
format.html { redirect_to(project_tasks_url(@project)) }
format.js
format.xml { head :ok }
end
# format.js leitet zum view delete.js.rjs weiter
# Element das gelöscht wurde ausblenden
page.visual_effect :fade, dom_id(@task)

Details
ActionView::Helpers::PrototypeHelper
ActionView::Helpers::PrototypeHelper::JavaScriptGen
erator
Helfer für die Identi zierung von HTML Elementen
ActionView::Helpers::RecordTagHelper
ActionView::Helpers::RecordIdenti cationHelper

Praxis-Session

?