Mel Mel - 1 year ago 234
Ruby Question

Rails 4 - Bootstrap modal form - setup

I'm trying to follow this tutorial to setup a modal containing a nested form in my Rails 4 app.

I have models for Project and Invite. The associations are:

Project has_many :invites
Invite belongs_to :project

In my views projects folder, I have made a partial called 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 class="modal-body">
**here comes whatever you want to show!**
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>

I'm trying to link to that from from my project show page, which has:

<%= 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 my app/javascripts folder, I have a file called new_invitation.js.erb, with:

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

In my application js, I have:

//= require bootstrap/modal

(slightly different to the tutorial because I use rails 4 and bootstrap sass).

In my projects controller, I have:

def new_invitation
respond_to do |format|

I changed my routes from a put to a get action (although I don't understand this step):

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

There is a problem with the link path in the attempt above. I'm not sure why, but the error message suggests using:


When I try that, I get an error that says:

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

I saw in the comments in the tutorial, that someone tried rewriting the js file as:

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

I tried that but get the same error message. Can anyone see what I might need to do to replicate the success that the tutorial seems to have for other users?

Answer Source

The problem is with the member route defined here.

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


The member route generated is

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

The controller action projects/new_invitation#new_invitation doesn't even exist.

The mapping should be in the format controller#action. So, it should be

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

or even better,

get :new_invitation

Use rake routes | grep invitation to see the route generated.

In the new_invitation action, you're rendering a js response. So, rails will look for new_invitation.js.erb inside app/views/projects. You have to move your file from app/javascripts to the right location as mentioned above.

And there's another issue with your new_invitation.js.erb code. The _new_invitation.html.erb resides in views/projects/ directory. So, you should modify it to

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

otherwise, you'll get a Missing Template error since its looking for the template in the project directory. Make sure that you have _new_invitation.html.erb partial defined in app/views/projects directory.

To render the modal, you need to display the modal using the modal method.


Your new_invitation.js.erb should look like this.

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

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download