Keine der Fragen in diesem Forum scheint meine spezifischen Bedürfnisse zu berücksichtigen. Grundsätzlich habe ich einen "Details" -Button. Ich möchte, dass beim Klicken ein modaler Dialog mit Informationen aus der Datei show.html.erb des Modells angezeigt wird. Ich habe ein book.rb-Modell. In der Indexseite habe ich:
%Vor%Wenn ich normalerweise auf diese Schaltfläche klicke, werde ich mit der Aktion "show" zur Seite "book / id" weitergeleitet. Aber ich will nicht, dass es die Seite verlässt, sondern ich möchte ein modales Popup, das geschlossen werden kann. Ich habe alle jquery und JavaScript-Code auf verwandten Themen in diesem Forum versucht, aber keiner scheint den Trick zu tun. Die meisten scheinen nur für die Erstellung oder benutzerdefinierte Aktionen gerichtet zu sein.
Um Wiederholungen zu vermeiden, habe ich folgendes versucht, von denen keines funktioniert:
Dies:
%Vor%Dies:
%Vor%Und das:
%Vor%Irgendwelche Hilfe Jungs? Total noob hier.
Ich bin mir nicht sicher, wie sich @events auf Ihr Buchmodell bezieht, aber vorausgesetzt, wir gehen nur von einem einzigen Modell (Buch) aus, so könnte Ihr Code eingerichtet werden:
Dort, wo Sie @Bücher durchlaufen und den Link zu 'Details anzeigen' mit der Fernbedienung einschließen: true, um AJAX zu aktivieren.
%Vor%Auf dieser Seite sollten Sie auch Ihr Modal / Dialogfeld rendern, aber es sollte eine Klasse haben, die es versteckt hält (Sie werden das später mit JS / jQuery umschalten). Ich benutzte einen Partial, um den Code modularer zu halten, aber Sie könnten einfach die Modal Divs direkt darunter legen.
%Vor%
Dies ist teilweise mit der Struktur des Modells. Ich habe die Bootstrap-Version von Twitter verwendet, die einen vordefinierten Stil sowie einige nette Animationsauslöser hat.
%Vor%
Wenn Ihr Controller mit dem Standard-Scaffold eingerichtet ist, müssen Sie nur format.js zum Block readnt_to der show-Aktion hinzufügen. Dadurch wird automatisch eine Datei mit dem Namen show.js.erb erstellt (die Sie manuell erstellen müssen), wenn diese Aktion ausgelöst wird.
%Vor%
Wie Sie treffend gesagt haben, passiert hier die Magie und die AJAX-Antwort wird an Ihre Seite gesendet. Mit jQuery setze ich einige Variablen und ersetze den HTML-Code in der modalen Vorlage durch den von @book gerenderten (der aus einer partiellen stammt, die du mit dem Namen _book.html.erb erstellen musst).
%Vor%
Hier erstellen Sie die Vorlage für das, was in das Modal für die erfolgreiche AJAX-Antwort eingefügt wird.
%Vor%Ich habe eine Bookstore-Beispielanwendung mit diesem Code auf Github erstellt. Hoffe, das hilft.
Tags und Links jquery ruby-on-rails jquery-ui popup ruby-on-rails-3.2