在 Ruby on Rails/JS 中以模式呈现新表单而不是新页面

Posted 2023-05-08

【中文标题】在 Ruby on Rails/JS 中以模式呈现新表单而不是新页面

【英文标题】：Render page with new form in modal instead of new page in Ruby on Rails/JS

【发布时间】：2020-01-20 17:00:02

【问题描述】：

我无法渲染（引导）模式，而不是渲染用于创建新房间的经典 new.html.erb。

鉴于我是 JS 和模态的新手，我觉得我对正确阅读/理解在线此主题的内容并随后解决我的问题所需的一些基本概念缺乏理解。 因此，我想知道是否有人可以帮助我更好地了解在创建模式时我的代码中正在发生（和未发生）的事情。

真的很抱歉提出这么长的问题，但我不知道如何解释它，因为我不确定在哪里看/错误在哪里（这甚至包括文件夹映射）。

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

views/rooms/index.html.erb

<%= render "partials/show_panel_rooms_overview"%>

下面我的代码渲染用 link_to 引用 Rails 的传统新视图（工作）

views/partials/_show_panel_rooms_overview.html.erb

<%= link_to "add new room", new_hotel_room_path, class: "new-room-btn" %>

views/rooms/new.html.erb

<%= render 'room_new_form', hotel: @hotel%>

views/rooms/_room_new_form.html.erb

<%= simple_form_for [@hotel, @room] do |f|%>
    <%= f.input :name %>
    <%= f.button :submit %>
<% end %>

在模态代码下方（不工作）

(i) 型号 + (ii) 控制器同上

views/partials/_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>

views/rooms/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>

views/rooms/_room_new_form.html.erb

<%= simple_form_for [@hotel, @room] do |f|%>
    <%= f.input :name %>
    <%= f.button :submit %>
<% end %>

views/rooms/_new.js.erb

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

【参考方案1】：

对于查看我的问题的人，如果您觉得它有趣，我会更进一步（例如下一个错误）。呈现新表单的关键是使用 new.js.erb 并因此引用 partial 而不是 new.html.erb。 如果您对我当前的错误消息/代码有任何进一步的意见，请告诉我。

views/partials/_show_panel_rooms_overview.html.erb

<%= link_to "New", new_hotel_room_path, remote: true, class: "btn btn-success pull-right new" %>

views/rooms/new.js.erb

 $("#newModal .modal-content").html('<%= j render "rooms/room_new_form" %>');
  $("#newModal").modal();

views/rooms/_room_new_form.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span>&times;</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)