title: Rails 4 - Bootstrap modal form - setup
body: <p>I'm trying to follow <a href="https://coderwall.com/p/ej0mhg/open-a-rails-form-with-twitter-bootstrap-modals" rel="nofollow">this</a> tutorial to setup a modal containing a nested form in my Rails 4 app.</p>
  
  <p>I have models for Project and Invite. The associations are:</p>
  
  <pre><code>Project has_many :invites
  Invite belongs_to :project
  </code></pre>
  
  <p>In my views projects folder, I have made a partial called new_invitation.html.erb</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      **here comes whatever you want to show!**
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to link to that from from my project show page, which has:</p>
  
  <pre><code>&lt;%= link_to 'Invite Team Mates', new_invitation_path,  {:remote =&gt; true, 'data-toggle' =&gt;  "modal", 'data-target' =&gt; '#modal-window'}  %&gt;
       &lt;div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my app/javascripts folder, I have a file called new_invitation.js.erb, with:</p>
  
  <pre><code>$("#modal-window").html("&lt;%= escape_javascript(render 'project/new_invitation') %&gt;");
  </code></pre>
  
  <p>In my application js, I have:</p>
  
  <pre><code>//= require bootstrap/modal
  </code></pre>
  
  <p>(slightly different to the tutorial because I use rails 4 and bootstrap sass).</p>
  
  <p>In my projects controller, I have:</p>
  
  <pre><code>def new_invitation
      respond_to do |format|
        format.html
        format.js
      end
  end
  </code></pre>
  
  <p>I changed my routes from a put to a get action (although I don't understand this step):</p>
  
  <pre><code> resources :projects do
      member do
      get "new_invitation" =&gt; "projects/new_invitation", as: :new_invitation
      end
      resources :invites
    end
  </code></pre>
  
  <p>There is a problem with the link path in the attempt above. I'm not sure why, but the error message suggests using:</p>
  
  <pre><code>new_invitation_project_path 
  </code></pre>
  
  <p>When I try that, I get an error that says:</p>
  
  <pre><code>undefined method `render' for #&lt;#&lt;Class:0x007fa2b2138bf0&gt;:0x007fa2a04a1308&gt;
  </code></pre>
  
  <p>I saw in the comments in the tutorial, that someone tried rewriting the js file as:</p>
  
  <pre><code>$("#modal-window").html("&lt;%= escape_javascript(render :partial =&gt; 'project/new_invitation') %&gt;");
  </code></pre>
  
  <p>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?</p>