Rails 4-Bootstrap模式表单-设置 [英] Rails 4 - Bootstrap modal form - setup

问题描述

我正在尝试遵循此教程，在我的Rails 4应用程序中设置一个包含嵌套表单的模态。

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

我有用于Project和Invite的模型。关联如下：

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

Project has_many :invites
Invite belongs_to :project

在我的views projects文件夹中，我做了一个名为new_invitation.html.erb的部分内容

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>

在我的app / javascripts文件夹中，有一个名为new_invitation.js.erb的文件，其中： / p>

In my app/javascripts folder, I have a file called new_invitation.js.erb, with:

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

在我的应用程序js中，我有：

In my application js, I have:

//= require bootstrap/modal

（略有不同之所以使用本教程，是因为我使用了rails 4和bootstrap sass）。

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

我在本教程的评论中看到有人试图将js文件重写为：

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?

推荐答案

问题

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

end

生成的成员路由为

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

控制器操作 projects / new_invitation＃ new_invitation 甚至不存在。

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

映射的格式应为 controller＃action 。因此，应该是

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

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

甚至更好，

get :new_invitation

使用耙路| grep邀请查看生成的路线。

在 new_invitation 动作中，重新呈现 js 响应。因此，Rails会在 app / views / projects 中查找 new_invitation.js.erb 。如上所述，您必须将文件从 app / javascripts 移至正确的位置。

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.

还有另一个问题使用您的 new_invitation.js.erb 代码。 _new_invitation.html.erb 驻留在 views / projects / 目录中。因此，您应该将其修改为

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') %>");

否则，您将获得 Missing Template 错误，因为它正在 project 目录中寻找模板。确保在 app / views / projects 目录中定义了 _new_invitation.html.erb 部分。

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.

要渲染模式，您需要使用 modal 方法显示模式。

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

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

您的 new_invitation.js.erb 应该看起来

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

希望这会有所帮助！

这篇关于Rails 4-Bootstrap模式表单-设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！