Wie erstellen Sie popup-Fenster zum anlegen neuer Datensatz in rails 3
Wir haben eine Anforderung, wo die web-Seite zeigt alle Datensätze aus der Zusammenlegung paar Tische.
Wir haben eine "Schaltfläche Hinzufügen" - bei Klick auf die Schaltfläche ich habe zum anzeigen eines popup-Fenster, in dem Benutzer geben Sie die erforderlichen details. Das popup-Fenster zwei Schaltflächen Speichern und Abbrechen.
Klick auf "Speichern", sollte überprüfen Sie die Felder und wenn alle Prüfungen bestanden, dann den Datensatz speichern, um die Datenbank sonst die Anzeige der Fehlermeldungen in alert-Boxen.
Klicken auf "Abbrechen" - Knopf schließt das popup-Fenster.
Wie erstelle ich popup bei Klick auf Schaltfläche hinzufügen?
Sie müssen JavaScript. Das popup kann die Verwendung der standard-controller-Aktionen (
1. wie kann ich link-controller-Aktionen aus dem popup? 2. wie schließe ich das popup?
edit
,new
,update
..). Bin ich traurig, dass Sie nur grobe Richtungen, aber das erste, was Sie tun können, ist zu untersuchen, wie die Verwendung von JavaScript zum erstellen einer popup, Holen, HTML, senden Sie ein Formular. AJAX in anderen Worten. Und MySQL ist hier nicht wichtig.1. wie kann ich link-controller-Aktionen aus dem popup? 2. wie schließe ich das popup?
InformationsquelleAutor sudhir | 2011-07-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Sie benötigen, zu trennen die Dinge, die sind server-seitig (Schienen, Controller, Aktionen) und client-Seite (popups, JavaScript, senden von Anfragen).
Ihre client-Aktionen (JavaScript-code) sollten darüber nachdenken, Ihre Rails-Anwendung, wie etwa einige server gibt einige Antworten für einige Anfragen. Aus JavaScript-Sicht ist es nicht wichtig, ob der server ausgeführt wird, Schienen oder Smalltalk.
Den grundlegenden workflow für Ihr popup kann sein:
1) öffnen Sie ein neues Fenster - Dies erfordert client-Seite Aktivität von JavaScript. Verwenden Fenster.öffnen - Funktion, oder (ich demütig betrachten diese Methode eine bessere) erstellen Sie eine neue
<div>
und style es mit CSS so wird es-Abdeckung (ein netter Effekt ist ein halb-opaken hintergrund:background: #ddf; opacity: 0.5;
, durch die Sie immer noch sehen, den Inhalt der Seite).2) füllen Sie das Fenster mit einem edit-Formular - Hier Ihre client-Seite Skript sollte eine AJAX-like nennen (nicht unbedingt real-AJAX, da in diesem Fall eine synchrone Anfrage kann auch sinnvoll sein) um das Bearbeiten-Formular von Ihrer Rails-Anwendung. Sehen Sie diese simplicated Beispiel:
3) Bereiten Sie die form-Rückgabe-Aktion in Ihrer Rails-Anwendung - (server-Seite) in der Regel kann dies in Ihrem
new
Aktion der gegebenen Ressource controller, aber gerendert ohne layout.Ein alternativer Ansatz wäre der Aufbau des Formulars durch den JavaScript (ohne das Holen es separat), oder, um es immer in der Seite - nur standardmäßig ausgeblendet, so dass das JavaScript muss nur seine
display
Eigenschaft.4) Handle des Formulars - Sie wahrscheinlich wollen, dass die user bleiben auf der gleichen Seite, so sollten Sie abfangen der form der Einreichung. Einfach fügen Sie einen Ereignishandler auf die "submit" - Ereignis des Formular erstellt, erstellen Sie eine Anfrage, post, überprüfen Sie die server-Antwort.
Den Antwort wird zurückgegeben durch Schienen, durch Ihre :create-Aktion. Sie haben vielleicht schon bereit, da der erstellte code durch
./script/rails generate scaffold
ist in der Regel OK.Wenn die Antwort 201 (erstellt), können Sie schließen Sie das popup (
display: none
) und aktualisieren Sie die Seite, um das neue Objekt - entweder aktualisieren die ganze Seite, oder Holen nur die geänderten Teile.Wenn die
create
Aktion kann das Objekt nicht erstellen, standardmäßig wird der response-code 422 (unprocessable entity) und der Inhalt der Modell-Fehler-Objekt gerendert als JSON oder XML. Nur die Anzeige der Fehler in der form (lassen Sie Ihr JavaScript setzen Sie dieinnerHTML
einige vordefiniertes element).War die "manuelle" Art und Weise zu tun die Aufgabe. Ich habe einige Abneigung (kaum erklärbar 😉 , JavaScript-Bibliotheken, und ich arbeite lieber direkt mit DOM. Finden Sie eine Vielzahl von Schienen Helfer, die sparen Sie aus JavaScript-code schreiben. Ich denke, dass der Blick auf die
:remote => true
parameter derform_for
wird ein guter Ausgangspunkt.Auch die jQuery-Dokumentation ( http://docs.jquery.com/Main_Page ) eine gute Sache sein kann, zu Lesen.
Ende dieser langen Geschichte, hier sind die kurze Antworten auf Ihre Fragen aus den Kommentaren:
: Durch das senden einer HTTP-Anfrage an die richtige URL: "GET /users/1/notes/new", "POST /user/1/notes"
: Durch die Einstellung
display: none
wenn das popup ist ein element der Seite, oder telefonischwindow.close()
wenn Ihr pop-up wird ein separates Fenster.InformationsquelleAutor Arsen7
Machte ich es wie folgt:
Fenster zu Öffnen:
Um das Fenster zu Schließen nach dem senden:
popup
die scheint ungültig zu sein.Leider offenbar, dass die option (:popup) wurde entfernt 🙁 ruby-forum.com/topic/4408872
InformationsquelleAutor Ivan Carrasco Quiroz