#58. select-liste (deren Werte durch die Auswahl des Benutzers in der ersten Liste bestimmt werden) direkt über dem Button.

Transkript

1 Dynamisch eine Auswahlliste in einem Rails-Template generieren #58 HACK #58 Dynamisch eine Auswahlliste in einem Rails-Template generieren Hack Generieren Sie mit Hilfe von Ajax und Ruby on Rails eine Auswahlliste aus serverseitigen Daten. #58 Dieser Hack erzeugt mit Hilfe einer Ruby-on-Rails-Anwung ein select- Element aus serverseitigen Daten. Im Gegensatz zu der typischen Art und Weise, wie ein Web-Widget auf einer Webseite generiert wird, wählt der Benutzer den Inhalt für das Pop-up, und dann erscheint das Pop-up aus dem Nichts, ohne dass sich sonst etwas auf der Seite ändert. Die Auswahlen, die der Benutzer in dem Pop-up sieht, stammen von einer serverseitigen Komponente; sie sind also kein fest kodiertes JavaScript oder HTML, das Bestandteil der Webseite ist. Das in diesem Hack gezeigte Verhalten ähnelt demjenigen einiger unserer früheren Hacks, allerdings ist der Weg, den der Code nimmt, um diese Wirkung zu erzielen, ganz anders. Eine Rails-Anwung verbirgt alle XMLHttpRequest- Mechanismen hinter ihren eigenen Methoden. Abbildung 7-9 zeigt, wie die Webseite aussieht. Der Benutzer erreicht diese Seite, indem er die Adresse in seinen Webbrowser eintippt. Wir verwen den WEBrick-Server, der in Ruby on Rails enthalten ist. Abbildung 7-9: Backen Sie Ihr eigenes Pop-up Der Benutzer wählt entweder Mannschaft oder Einzel aus dem Pop-up-Menü und klickt dann auf den Sportarten-anzeigen-Button. Es erscheint eine weitere select-liste (deren Werte durch die Auswahl des Benutzers in der ersten Liste bestimmt werden) direkt über dem Button. Hack #58: Dynamisch eine Auswahlliste in einem Rails-Template generieren 321

2 #58 Dynamisch eine Auswahlliste in einem Rails-Template generieren In einer Rails-Anwung ist eine Controller-Komponente für die Präsentationen verantwortlich, die der Web-Benutzer zu sehen bekommt. Die Controller-Komponente befindet sich im Verzeichnis <web-app-root>/app/ controllers. Wird beispielsweise verwet, dann sucht das Framework in <web-app-root>/app/controllers/hacks_controller.rb nach einer Action oder Methode namens index, die bzw. das die Antwort generiert. Actions starten als Ruby-Methoden innerhalb eines Controller- Objekts (in objektorientierten Begriffen: einer Klasse), das in dieser Datei definiert ist. Der vollständige Pfad auf meiner Mac-OS-X-Maschine lautet ~/Rails/Energy/app/controllers/hacks_controller.rb. Energy ist das oberste Verzeichnis der Web-Anwung. Wir wollen uns in hacks_controller.rb die Methode index( ) anschauen: class HacksController < ApplicationController def index #restliche Klassefinition... Da passiert nichts. Das ist eine leere Methodefinition. In diesem Fall sucht Rails nach einem Template namens index.rhtml im Verzeichnis app/views/ hacks. Einer der intuitiven Aspekte des Rails-Frameworks besteht darin, dass das Framework URL-Pfadinformationen, wie etwa den hacks-teil von auf Verzeichnisse des gleichen Namens an entscheiden Stellen, wie etwa views, abbildet. index.rhtml liefert das Template für unseren Hack: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <%= javascript_include_tag :defaults %> <title>ajax Rails & Auswahllisten</title> </head> <body> <%= form_remote_tag(:update => "sel_con",:url => { :action => :create_select }, :position => "top",:success => "$('sel_con').innerhtml=''" ) %> <p> Bitte wählen Sie eine Sportkategorie: </p> <p> 322 Kapitel 7: Mit Ajax und Ruby on Rails arbeiten

3 Dynamisch eine Auswahlliste in einem Rails-Template generieren #58 <%= select_tag "categories", "<option>mannschaft</option><option>einzel</option>" %> </p> <div id="sel_con"></div> <p> <%= submit_tag "Sportarten anzeigen" %> </p> <%= _form_tag %> </body> </html> Dieses Template ruft die Methode form_remote_tag( ) auf, um das div zu aktualisieren, das sich unter dem form-tag befindet. Diese Methode enthält die ganze Ajax- und Request-Objekt-bezogene Funktionalität, wobei das div mit Server-Daten aktualisiert wird und weitere Informationen auf bzw. vor bereits existieren div-inhalten positioniert werden (wie durch den Parameter :position => "top" festgelegt). Mit anderen Worten: Wenn der Benutzer auf den Sportarten-anzeigen-Button anklickt, dann wird ein XMLHttp- Request-Objekt erzeugt, dessen s( )-Methode eine Anforderung an eine Rails-Methode namens create_select set. Diese Action ist als Ruby- Methode in der Datei hacks_controller.rb definiert, in die wir vorhin hineingeschaut haben. Die Action create_select setzt die HTTP-Antwort zusammen, die die Tags und den Inhalt einer neuen Pop-up- oder select-liste bestimmt. Abbildung 7-10 zeigt das Ergebnis eines Klicks auf den Sportarten-anzeigen-Button. Abbildung 7-10: Voilà, da ist die Auswahlliste. Wie entsteht nun diese Antwort? Wir wollen uns diesen Teil des Controller- Objekts anschauen: class HacksController < ApplicationController def index Hack #58: Dynamisch eine Auswahlliste in einem Rails-Template generieren 323

4 #58 Dynamisch eine Auswahlliste in einem Rails-Template generieren def create_select indarr=["skilanglauf", "Inline Skating","Tennis", "Triathlon","Straßenrennen","Figuren-Skating","Gewichtheben", "Speed-Skating","Snowboarding"]; teamarr=["fußball","basketball","football","hockey", "Baseball","Lacrosse"]; str=""; if params[:categories].index('team')!= nil rer :partial => "options", :locals => { :sports => teamarr,:sptype => "team"} elsif params[:categories].index('individual')!= nil rer :partial => "options", :locals => { :sports => indarr, :sptype => "individual" } else str="<select id='individual' name='individual'> <option>unknown</option></select>"; rer :text => str; #Ende der Methode #Ende der Klassefinition Dieses Controller-Objekt speichert zwei Ruby-arrays in den Variablen indarr und teamarr (diese Werte könnten alternativ aus einer Datenbank erzeugt werden). Erinnern Sie sich an die existiere select-liste der Webseite, die dem Benutzer die Wahl zwischen Mannschaft und Einzel ließ? Dies ist ein select-element mit dem Namen categories. Der Browser übermittelt diesen Wert als einen form-parameter der Rails-Action. Der Code benutzt die Syntax params[:categories], um den Wert dieses Parameters zu ermitteln. Dann wird es interessant auf Rails-Weise. Der Server muss immer noch eine HTTP-Antwort auf das Ajax-Request-Objekt liefern. Die Action verwet die RoR-Methode rer( ), um das HTML für eine select-liste zurück an unsere Anwung zu sen. Die array-werte bilden dabei den Inhalt der select-liste: rer :partial => "options", :locals => { :sports => teamarr,:sptype => "team"} rer( ) legt in seinem ersten Parameter ein partial namens options fest. Im Rails-Jargon ist ein partial einfach ein Template, dessen Inhalt immer wieder verwet werden kann zum Beispiel ein oder mehrere HTML-Tags. Bei Verwung der Rails-Namenskonvention wird das partial (tatsächlich eine Textdatei) in das Verzeichnis app/views/hacks gesetzt; seinem Namen geht ein Unterstrich voran, wie bei _options.rhtml. In einfachem Deutsch deklariert 324 Kapitel 7: Mit Ajax und Ruby on Rails arbeiten

5 Dynamisch eine Auswahlliste in einem Rails-Template generieren #58 also der Methodenaufruf»Baue die Antwort als Inhalt des _options-partial zusammen, und übergib die beiden lokalen partial-variablen, :sports und :sptype. Vergessen Sie nicht den : vor den Variablennamen! Schwung mit Partials Das partial benötigt die array-werte, um die select-liste aufzubauen. Diese Werte sind in der Variablen teamarr gespeichert. Rails verwet für partials seine eingebaute Namenskonvention (die Sache mit dem Unterstrich), um den korrekten Inhalt zu finden und ihn als Antwort wiederzugeben. Schauen wir uns die partial-datei _options.rhtml an: <select id="<%= sptype %>" name="<%= sptype %>"> <% sports.each do sport %> <option><%= sport %></option> <% %> </select> Ein kleiner eingebetteter Ruby-Code gibt dem select-element seine id und seinen Namen. Der eingebettete Code durchläuft dann das array (das durch die Methode rer( ) in das partial übergeben wurde) und erzeugt ein option-element für jedes array-mitglied, wie bei <option>hockey</option>. Es war zwar auch ein bisschen serverseitiger Ruby-Code beteiligt, dennoch musste der Code das Request-Objekt nicht anrühren oder sich damit befassen, den Rückgabewert zu holen oder zu ermitteln. Aufräumen Die einzige Trickserei, die hier vorkommt, betrifft die Absicherung, dass die Anwung nicht eine neue select-liste nach der anderen innerhalb des div anhängt, währ der Benutzer den Button anklickt. Wir wollen, dass alle existieren selects in diesem div jeweils durch neue ersetzt werden. Daher fügen wir ein wenig Code zum Aufräumen ein, der das div leert, bevor es mit einer neuen select-liste aktualisiert wird: <%= form_remote_tag(:update => "sel_con",:url => { :action => :create_select }, :position => "top",success => "$('sel_con').innerhtml=''" ) %> success geht folgerichtig dem Zustand complete voran, das heißt, dieser Code setzt den Inhalt des div auf den leeren string, bevor die neue select-liste erscheint. Hack #58: Dynamisch eine Auswahlliste in einem Rails-Template generieren 325

6 #58 Dynamisch eine Auswahlliste in einem Rails-Template generieren Um ein Fehlschlagen einer Anforderung zu verarbeiten, wie etwa einen heruntergefahrenen Webserver, fügen Sie diesen Code aus einem früheren Hack als form_remote_tag( )-Parameter ein: #$('failure') ist die Prototype-Abkürzung für #document.getelementbyid('failure') :failure => "$('failure').innerhtml='fehler; request status='+request.status" 326 Kapitel 7: Mit Ajax und Ruby on Rails arbeiten