Rails 4 - Bootstrap Modal Form - Setup

Question

Ich versuche, this Tutorial zu folgen, um ein Modal mit einem verschachtelten Formular in meiner Rails 4 App einzurichten.

Ich habe Modelle für Project und Invite. Die Verbände sind:

Project has_many :invites 
Invite belongs_to :project 

In meinen Ansichten Ordner Projekte, ich habe einen Teil new_invitation.html.erb

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    **here comes whatever you want to show!** 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 

Ich versuche zu verknüpfen, dass aus von meinem Projekt zeigen Seite aufgerufen hat, welches:

<%= link_to 'Invite Team Mates', new_invitation_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %> 
    <div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

In meinen app/Javascripts Ordnern habe ich eine Datei mit dem Namen new_invitation.js.erb, mit:

$("#modal-window").html("<%= escape_javascript(render 'project/new_invitation') %>"); 

In meiner Anwendung js, ich habe:

//= require bootstrap/modal 

(leicht zum Tutorial anders, weil ich Schienen 4 und Bootstrap sass).

In meinen Projekten Controller, ich habe:

def new_invitation 
    respond_to do |format| 
     format.html 
     format.js 
    end 
end 

ich meine Routen von einem Put auf eine get Aktion geändert (obwohl ich diesen Schritt nicht verstehen):

resources :projects do 
    member do 
    get "new_invitation" => "projects/new_invitation", as: :new_invitation 
    end 
    resources :invites 
    end 

Es gibt ein Problem mit dem Link-Pfad im obigen Versuch. Ich bin mir nicht sicher, warum, aber die Fehlermeldung schlägt vor, mit:

new_invitation_project_path 

Wenn ich versuche, dass ich einen Fehler, der sagt:

undefined method `render' for #<#<Class:0x007fa2b2138bf0>:0x007fa2a04a1308> 

ich in den Kommentaren im Tutorial sah, dass jemand versuchte, die js-Datei wie folgt umzuschreiben:

$("#modal-window").html("<%= escape_javascript(render :partial => 'project/new_invitation') %>"); 

Ich habe versucht, aber die gleiche Fehlermeldung erhalten. Kann jemand sehen, was ich tun muss, um den Erfolg zu reproduzieren, den das Tutorial für andere Benutzer zu haben scheint?

Answer 1

Das Problem ist mit der hier definierten Mitgliedsroute.

resources :projects do 
    member do 
    get "new_invitation" => "projects/new_invitation", as: :new_invitation 
end 

Ende

Die erzeugte Mitglieds Route ist

new_invitation_project GET /projects/:id/new_invitation(.:format) projects/new_invitation#new_invitation 

Der Regler projects/new_invitation#new_invitation existieren auch dann nicht.

Das Mapping sollte im Format controller#action erfolgen.So soll es

get "new_invitation" => "projects#new_invitation", as: :new_invitation 

oder noch besser,

get :new_invitation 

Verwenden rake routes | grep invitation erzeugt, um die Strecke zu sehen. In der new_invitation Aktion rendern Sie eine js Antwort. So werden Schienen nach new_invitation.js.erb innerhalb app/views/projects suchen. Sie müssen Ihre Datei von app/javascripts an den richtigen Speicherort verschieben, wie oben erwähnt.

Und es gibt ein anderes Problem mit Ihrem new_invitation.js.erb Code. Die _new_invitation.html.erb befindet sich in views/projects/ Verzeichnis. Also, sollten Sie es ändern, um

$("#modal-window").html("<%= escape_javascript(render 'projects/new_invitation') %>"); 

sonst, erhalten Sie einen Missing Template Fehler seit seiner Suche nach der Vorlage im project Verzeichnis. Stellen Sie sicher, dass Sie _new_invitation.html.erb teilweise im Verzeichnis app/views/projects definiert haben.

Um das Modal darzustellen, müssen Sie das Modal mithilfe der modal-Methode anzeigen.

$('#modal-window').modal('show'); 

Ihre new_invitation.js.erb sollte wie folgt aussehen.

$("#modal-window").html("<%= escape_javascript(render 'projects/new_invitation') %>"); 
$('#modal-window').modal('show'); 

Hoffe, das hilft!