Рендеринг страницы с новой формой в модале вместо новой страницы в Ruby on Rails / JS - PullRequest
Новая
       22

Рендеринг страницы с новой формой в модале вместо новой страницы в Ruby on Rails / JS

1 голос
/ 19 сентября 2019

Я не могу отобразить модал (bootstrap) вместо рендеринга классического new.html.erb, который используется для создания новой комнаты.

Учитывая тот факт, что я новичок в JS и модах, у меня такое ощущение, что мне не хватает понимания некоторых фундаментальных понятий, необходимых для правильного чтения / понимания контента по этой теме в Интернете и последующего исправления моей проблемы. Поэтому мне было интересно, может ли кто-нибудь помочь мне лучше понять, что происходит (и не происходит) в моем коде при создании модала.

Очень жаль за создание такого длинного вопроса,но я не знаю, как еще объяснить это, поскольку я не уверен, где искать / ошибка (это даже включает отображение папки).

assets / javascripts / application.js 

//= require jquery
//= require popper
//= require bootstrap
//= require_tree .

gemfile 

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"%>

Ниже моего рендеринга кода с ссылкой на ссылку на традиционное новое представление 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 Ответ

0 голосов
/ 20 сентября 2019

Для людей, которые смотрят на мой вопрос, на случай, если вам покажется интересным, я продвинулся на один шаг дальше (например, следующая ошибка).Ключом для визуализации новой формы является использование new.js.erb и, следовательно, обращение к частичному , а не к 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>

Это дает мне новую (yay) ошибку:

Вид отображается в соответствии с моим терминалом, но ничего не отображается: 

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)
...