javascript - 在 Ruby on Rails/JS 中以模式呈现新表单而不是新页面
问题描述
我无法渲染(引导)模式,而不是渲染用于创建新房间的经典 new.html.erb。
鉴于我是 JS 和 modals 的新手,我觉得我对正确阅读/理解在线此主题的内容并随后解决我的问题所需的一些基本概念缺乏理解。因此,我想知道是否有人可以帮助我更好地理解在创建模态时我的代码中正在发生(和未发生)的事情。
真的很抱歉创建这样一个长度问题,但我不知道如何解释它,因为我不确定在哪里看/错误是(这甚至包括文件夹映射)。
资产/javascripts/application.js
//= require jquery
//= require popper
//= require bootstrap
//= require_tree .
宝石文件
gem 'bootstrap'
gem 'popper_js'
gem 'jquery-rails'
楷模
class Room < ApplicationRecord
belongs_to :hotel
end
class Hotel < ApplicationRecord
has_many :rooms, dependent: :destroy
end
控制器
class RoomsController < ApplicationController
def new
respond_to do |format|
format.html
format.js
end
@hotel = Hotel.find(params[:hotel_id])
@room = Room.new
authorize @room
end
def create
@room = Room.new(room_params)
@hotel = Hotel.find(params[:hotel_id])
@room.hotel = @hotel
authorize @room
#redirect to index page
if @room.save
redirect_to hotel_rooms_path(@hotel)
else
render :new
end
end
意见/房间/index.html.erb
<%= render "partials/show_panel_rooms_overview"%>
在我的代码渲染下面,使用 link_to 引用 Rails 的传统新视图(工作)
意见/部分/_show_panel_rooms_overview.html.erb
<%= link_to "add new room", new_hotel_room_path, class: "new-room-btn" %>
意见/房间/new.html.erb
<%= render 'room_new_form', hotel: @hotel%>
意见/房间/_room_new_form.html.erb
<%= simple_form_for [@hotel, @room] do |f|%>
<%= f.input :name %>
<%= f.button :submit %>
<% end %>
在模态代码下方(不工作)
(i) 型号 + (ii) 控制器同上
意见/部分/_show_panel_rooms_overview.html.erb
<%= link_to "add new room", new_hotel_room_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>
意见/房间/new.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">
<%= render 'room_new_form', hotel: @hotel%>
</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>
意见/房间/_room_new_form.html.erb
<%= simple_form_for [@hotel, @room] do |f|%>
<%= f.input :name %>
<%= f.button :submit %>
<% end %>
意见/房间/_new.js.erb
$("#modal-window").html("<%= escape_javascript(render 'rooms/new') %>");
解决方案
对于查看我的问题的人,如果您可能觉得它有趣,我会更进一步(例如下一个错误)。呈现新表单的关键是使用 new.js.erb 并因此引用部分而不是 new.html.erb。如果您对我当前的错误消息/代码有任何进一步的意见,请告诉我。
意见/部分/_show_panel_rooms_overview.html.erb
<%= link_to "New", new_hotel_room_path, remote: true, class: "btn btn-success pull-right new" %>
意见/房间/new.js.erb
$("#newModal .modal-content").html('<%= j render "rooms/room_new_form" %>');
$("#newModal").modal();
意见/房间/_room_new_form.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">New Item</h4>
</div>
<div class="modal-body">
<%= simple_form_for [@hotel, @room] do |f|%>
<%= f.input :name %>
<%= f.button :submit %>
<% end %>
</div>
这为我提供了一个新的(耶)错误:
该视图是根据我的终端呈现的,但没有显示任何内容:
Rendering rooms/new.js.erb
Rendered rooms/_rooms_new_form.html.erb (9.2ms)
Rendered rooms/new.js.erb (13.2ms)
Completed 200 OK in 35ms (Views: 28.4ms | ActiveRecord: 0.4ms)
推荐阅读
- mysql - IF 条件在存储过程中不起作用
- shell - 如何将环境变量作为 Dockerfile 中 shell 脚本的参数传递?
- javascript - 我如何让机器人忽略某些角色// Discord.js
- android - android清单错误@xml/文件路径
- spring - 使用 JAVA 进行 Elasticsearch UpdateByQueryRequestBuilder 单元测试
- java - Android:自定义键盘可以记录用户输入的文本吗?
- docker - SSH 配置文件端口转发在 Docker 中未按预期工作(撰写)
- oracle - 为什么 oracle '使用 NCHAR_CS' 不能处理扩展的 ASCII 字符
- python - python中列的并行处理
- java - Android:如何将列表视图保存在根目录中