Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Geleitwort des Fachgutachters
Einleitung
1 Einführung
2 Installation
3 Erste Schritte
4 Einführung in Ruby
5 Eine einfache Bookmarkverwaltung
6 Test-Driven Development
7 Rails-Projekte erstellen
8 Templatesystem mit ActionView
9 Steuerzentrale mit ActionController
10 Datenbankzugriff mit ActiveRecord
11 E-Mails verwalten mit ActionMailer
12 Nützliche Helfer mit ActiveSupport
13 Ajax on Rails
14 RESTful Rails und Webservices
15 Rails mit Plug-ins erweitern
16 Performancesteigerung
17 Sicherheit
18 Veröffentlichen einer Rails-Applikation auf einem Server
Ihre Meinung?

Spacer
 <<   zurück
Ruby on Rails 2 von Hussein Morsy, Tanja Otto
Das Entwickler-Handbuch
Buch: Ruby on Rails 2

Ruby on Rails 2
geb., mit DVD
699 S., 39,90 Euro
Rheinwerk Computing
ISBN 978-3-89842-779-1
Online bestellenPrint-Version jetzt bestellen
* versandkostenfrei in (D) und (A)
Pfeil 13 Ajax on Rails
  Pfeil 13.1 Grundlagen
  Pfeil 13.2 JavaScript-Frameworks
  Pfeil 13.3 Einbinden der JavaScript-Bibliotheken
  Pfeil 13.4 RJS: Ruby-JavaScript
  Pfeil 13.5 Debugging mit Firebug
  Pfeil 13.6 RJS-Referenz


Rheinwerk Computing - Zum Seitenanfang

13.6 RJS-Referenz  Zur nächsten ÜberschriftZur vorigen Überschrift

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.


Rheinwerk Computing - Zum Seitenanfang

Methoden zum Ein- und Ausblenden von Elementen  Zur nächsten ÜberschriftZur vorigen Überschrift

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 .


Rheinwerk Computing - Zum Seitenanfang

Methoden zum Hinzufügen, Ersetzen und Löschen von Elementen  Zur nächsten ÜberschriftZur vorigen Überschrift

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>
position Beschreibung
:top Der Inhalt wird an oberster Stelle, innerhalb des angegebenen Elements, eingefügt.
page.insert_html(:top,'list','<p>Neu</p>')
=>
<div id='liste'>
  <p>Neu</p>
  <p>Erster Eintrag</p>
</div>
:bottom Der Inhalt wird an unterster Stelle, innerhalb des angegebenen Elements, eingefügt.
page.insert_html(:before,'list','<p>Neu</p>')
=>
<div id='liste'>
  <p>Erster Eintrag</p>
  <p>Neu</p>  
</div>
:before Der Inhalt wird vor dem angegebenen Element eingefügt.
page.insert_html(before,'list','<p>Neu</p>')
=>
<p>Neu</p>
<div id='liste'>
  <p>Erster Eintrag</p>
</div>
:after Der Inhalt wird nach dem angegebenen Element eingefügt.
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')

Rheinwerk Computing - Zum Seitenanfang

Sonstige Methoden  topZur vorigen Überschrift

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');"


Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
 <<   zurück
  Zum Katalog
Zum Katalog: Ruby on Rails 2
Ruby on Rails 2
Jetzt bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Ruby on Rails 3.1






 Ruby on Rails 3.1


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Katalog: JavaScript






 JavaScript


Zum Katalog: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2008
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de