Rails 4 - Bootstrap modal form - setup

Question

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>
  <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>

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|
      format.html
      format.js
    end
end

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
    end
    resources :invites
  end

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

new_invitation_project_path 

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 1

The problem is with the member route defined here.

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

end

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.

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

Your new_invitation.js.erb should look like this.

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

Hope this helps!