13.6 RJS-Referenz 

Im Folgenden werden die Ruby-JavaScript-Methoden aufgeführt. Diese Methoden sind Ruby-Befehle, die jedoch JavaScript-Code generieren. Deshalb geben wir auch an, welcher JavaScript-Befehl generiert wird.

Methoden zum Ein- und Ausblenden von Elementen 

hide(id)

Element ausblenden

Dieser Befehl blendet das Element mit der angegebenen ID aus. Optional können noch weitere Elemente angegeben werden. Dazu wird das CSS-Attribut display auf den Wert none gesetzt.

Im folgenden Beispiel werden die HTML-Elemente mit den IDs message-1 und message-2 ausgblendet:

page.hide('message-1','message-2')

show(id)

Element einblenden

Um ein Element einzublenden, kann die Methode show verwendet werden:

page.show('message-1','message-2')

toggle(ids)

Ein-/ausblenden

Diese Methode wendet die Methode show an, falls das Element ausgeblendet ist, und die Methode hide, falls das Element eingeblendet ist.

visual_effect(name, id = nil, options)

Animierte Effekte

Anstatt einfach nur ein Element ein- oder auszublenden (wie bei show und hide), können animierte Effekte zum Ein- und Ausblenden auf ein Element angewendet werden.

Der folgende Befehl blendet ein Element innerhalb von 3 Sekunden aus:

page.visual_effect(:fade, 'message', duration => 3.0)

Die verschiedenen Effekte werden von der Script.aculo.us-Bibliothek zur Verfügung gestellt.

Eine interaktive Darstellung sämtlicher Effekte finden Sie auf der Website http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo .

Methoden zum Hinzufügen, Ersetzen und Löschen von Elementen 

Die folgenden Methoden erlauben es, Inhalte hinzuzufügen und zu entfernen.

replace_html(id, content)

Inhalt ersetzen

Die Methode ersetzt den gesamten Inhalt des HTML-Elements mit der übergebenen ID durch übergebenen Inhalt (content), der entweder eine Zeichenkette (in der auch HTML-Code enthalten sein kann) oder ein Partial-Template sein kann.

Gegeben sei folgender HTML-Code:

<p id='message-1'> Hier ist ein <em>Beispiel</em></p>

Der Aufruf page.replace_html('message-1','Ersetzt') führt zu folgendem HTML-Code:

<p id='message-1'>Ersetzt</p>

Im folgenden Beispiel wird statt einer Zeichenkette ein Partial-Template angegeben mit dem Objekt @message:

page.replace_html('message-1',
		  :partial => 'message',
		  :object => @message)

In der Datei _message.html.erb könnten Sie z. B. Folgendes angeben:

Listing  *%_message.html.erb

<%= @message.text  %>

Die Verwendung eines Partials ist dann von Vorteil, wenn der Inhalt komplexer ist.

replace(id, content)

Inhalt und Tag ersetzen

Diese Methode ersetzt den kompletten Inhalt, inklusive des angegebenen HTML-Tags. Im Gegensatz zur Methode replace_html wird nicht nur der Inhalt des HTML-Tags mit der angegebenen ID ersetzt, sondern das gesamte Element.

Gegeben sei folgender HTML-Code:

<p id='message-1'> Hier ist ein <em>Beispiel</em></p>

Der Aufruf page.replace('message-1','<em>ersetzt</em>') führt zu folgendem HTML-Code:

<em>ersetzt</em>

Das heißt, der HTML-Tag <p> wurde vollständig ersetzt.

insert_html(position, id, content)

Neue Inhalte einfügen

Mit dieser Methode können neue Inhalte eingefügt werden. Über den ersten Parameter wird festgelegt, wo der neue Inhalt eingefügt werden soll. Die verschiedenen Optionen demonstrieren wir in nachfolgender Tabelle am Beispiel des folgenden HTML-Codes:

<div id='list'>
  <p>Erster Eintrag</p>
</div>

page.insert_html(:top,'list','<p>Neu</p>')
=>
<div id='liste'>
  <p>Neu</p>
  <p>Erster Eintrag</p>
</div>

page.insert_html(:before,'list','<p>Neu</p>')
=>
<div id='liste'>
  <p>Erster Eintrag</p>
  <p>Neu</p>  
</div>

page.insert_html(before,'list','<p>Neu</p>')
=>
<p>Neu</p>
<div id='liste'>
  <p>Erster Eintrag</p>
</div>

page.insert_html(:after,'list','<p>Neu</p>')
=>
<div id='liste'>
  <p>Erster Eintrag</p>
</div>
<p>Neu</p>

Tabelle  Optionen für position

remove(id)

Element entfernen

Dieser Befehl entfernt das angegebene Element aus der Seite. Optional können noch weitere Elemente angegeben werden. Im folgenden Beispiel werden die HTML-Elemente mit den IDs message-1 und message-2 entfernt:

page.remove('message-1','message-2')

Sonstige Methoden 

redirect_to(location)

Weiterleiten

Wenn die Methode redirect_to(url) aufgerufen wird, wird die Seite, von der die Ajax-Anfrage ausging, zu der angegebenen URL weitergeleitet. Statt der URL können auch der Controller und die Action angegeben werden (oder auch benannte Routen). Relative Pfadangaben sind zu vermeiden.

redirect_to airports_url

page.alert(meldung)

Meldung ausgeben

Es wird JavaScript-Code generiert, der eine JavaScript-Alert-Box mit der angegebenen Meldung anzeigt:

page.alert("Hallo Welt")
# => alert("Hallo Welt");

assign(variable, wert)

Wert zuweisen

Mit dieser Methode wird einer JavaScript-Variablen ein Wert zugewiesen:

page.assign(user_email,@user.email)
# => user_email = 'kara@trace.com'

call(function, parameter)

Funktion aufrufen

Diese Methode ruft eine JavaScript-Funktion auf, der man optional Parameter übergeben kann. Angenommen, wir haben in der Datei application.js folgende Funktion definiert:

function output(value) {
  alert(value);
}
page.call('output',"Hallo Welt")
# => output("Hallo Welt");

delay(sekunden=1) do ... end

Wartezeit

Die im Block aufgeführten Befehle werden erst nach der angegebenen Wartezeit ausgeführt. Wenn keine Zeit angegeben wird, wird die Wartezeit auf eine Sekunde gesetzt.

page.delay(4) do
  page.alert("4 Sekunden gewartet")
end
# => setTimeout(function() {
#      alert("4 Sekunden gewartet");
#    }, 4000);

<< (javascript)

Falls die RJS-Befehle nicht ausreichen, können Sie auch direkt JavaScript- Befehle angeben.

page << "alert('hello');"

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.