【问题标题】:Rails 4 - Bootstrap modal form - setupRails 4 - Bootstrap 模态表单 - 设置
【发布时间】:2016-08-29 00:57:15
【问题描述】:

我正在尝试按照 this 教程在我的 Rails 4 应用程序中设置一个包含嵌套表单的模式。

我有 Project 和 Invite 的模型。这些关联是:

Project has_many :invites
Invite belongs_to :project

在我的视图项目文件夹中,我创建了一个名为 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>

我正在尝试从我的项目显示页面链接到该页面,该页面具有:

<%= 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 的文件,其中包含:

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

在我的应用程序 js 中,我有:

//= require bootstrap/modal

(与教程略有不同,因为我使用的是 rails 4 和 bootstrap sass)。

在我的项目控制器中,我有:

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

我将路线从 put 更改为 get 操作(虽然我不明白这一步):

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

上述尝试中的链接路径有问题。我不确定为什么,但错误消息建议使用:

new_invitation_project_path 

当我尝试这样做时,我收到一条错误消息:

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

我在教程的cmets中看到,有人尝试将js文件重写为:

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

我试过了,但得到了同样的错误信息。谁能看到我可能需要做些什么才能复制本教程似乎对其他用户的成功?

【问题讨论】:

  • 你不应该在new_invitation.js.erb中渲染projects/new_invitation吗?
  • 但邀请属于项目(单数)。
  • 你没有明白我的意思。等等,我会发布我的答案。
  • 无论如何我都试过了——它不起作用——我得到这个错误:当我尝试时,#:0x007f8fd370cb90> 的未定义方法`render':$("#modal-window ").html(" 'projects/new_invitation') %>");

标签: ruby-on-rails ruby twitter-bootstrap routes bootstrap-modal


【解决方案1】:

问题在于这里定义的成员路由。

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

结束

生成的成员路由是

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

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

映射应采用controller#action 格式。所以,应该是

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

甚至更好,

get :new_invitation

使用rake routes | grep invitation查看生成的路由。

new_invitation 操作中,您正在呈现js 响应。所以,rails 会在app/views/projects 中寻找new_invitation.js.erb。如上所述,您必须将文件从app/javascripts 移动到正确的位置。

您的new_invitation.js.erb 代码还有另一个问题。 _new_invitation.html.erb 位于 views/projects/ 目录中。所以,你应该把它修改为

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

否则,您将收到 Missing Template 错误,因为它在 project 目录中查找模板。确保在 app/views/projects 目录中定义了 _new_invitation.html.erb 部分。

要渲染模态框,您需要使用modal 方法显示模态框。

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

您的new_invitation.js.erb 应该如下所示。

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

希望这会有所帮助!

【讨论】:

  • 嗨@Arun,我试过这个,但我得到了这个错误:undefined method `render' for #:0x007fbff63d1090>
  • 但我刚刚发现了这个:stackoverflow.com/questions/8370399/…
  • 但是 - 当我将 js 文件从 app/assets/javascripts 移动到视图/项目时 - 我可以渲染页面,但是到模态的链接只会导致整个屏幕变成透明的灰色。我什么也做不了,没有模态出现
  • 我可以从控制台中的 chrome 检查器中看到,有一个错误提示:缺少模板项目/new_invitation, application/new_invitation with {:locale=>[:en], :formats= >[:html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :haml, :jbuilder]}。
  • 当我尝试更改 js.erb(现在保存在 views/projects 文件夹中),返回到 projects/new_invitation 时,该错误消息不再显示在控制台中,但页面未加载模式
猜你喜欢
  • 2018-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-10-03
  • 2013-04-07
  • 2018-10-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多