我正在寻找一种方法来创建属于room_type的所有选项的simple_form字段，以便用户可以填写option_quantity。首先在表单中询问room_type，因此需要将此输入用于属于该room_type的选项。
当前尝试
目前，我正在使用 JQuery 获得属于此room_type的所有选项，但我不知道如何从这里开始(或者也许有更好的方法？
响应电流尝试
以下响应是使用我当前的尝试生成的。
{rooms: Array(3), options: Array(2), extra_guests: Array(1)}
rooms: (3) [{…}, {…}, {…}]
extra_guests: [{…}]
options: Array(2)
0: {id: 109, room_type_id: 185, name: "Amazing option", description: "", rank: null, …}
1: {id: 110, room_type_id: 185, name: "Second option", description: "", rank: null, …}
length: 2__proto__: Array(0)__proto__: Object
使用此 JSON，是否可以为每个选项创建一个单独的选项字段，其中包含要求用户填写option_quantity的字段？
法典
形式
<%= simple_form_for [@hotel, @reservation] do |f|%>
<%= f.simple_fields_for :rooms do |room| %>
<%= room.input :room_type, collection: @room_type_list, input_html:{
id: "room_type"
}%>
<% end %>
<h4>Options</h4>
<!-- List all options for room_type by name and display field for option_quantity -->
<% end %>
<script >
// dynamic options for change category
$(document).on("change", "#room_type", function(){
var room_type = $(this).val();
$.ajax({
url: "/hotels/<%= @hotel.id %>/reservations/new",
method: "GET",
dataType: "json",
data: {room_type: room_type},
error: function (xhr, status, error) {
console.error('AJAX Error: ' + status + error);
},
success: function (response) {
var options = response["options"];
console.log(response);
console.log(options)
console.log($("room_type-options").html(response));
// Code to generate list of options
}
});
});
</script>
图式
create_table "reservation_options", force: :cascade do |t|
t.bigint "option_id"
t.bigint "reservation_id"
t.integer "option_quantity"
[]
t.index ["option_id"], name: "index_reservation_options_on_option_id"
t.index ["reservation_id"], name: "index_reservation_options_on_reservation_id"
end
create_table "options", force: :cascade do |t|
t.bigint "room_type_id"
t.string "name"
[]
t.index ["room_type_id"], name: "index_options_on_room_type_id"
end
预订控制器
class ReservationsController < ApplicationController
# skip_before_action :authenticate_user!
def new
@hotel = Hotel.find(params[:hotel_id])
@reservation = Reservation.new
@room_type_list = @hotel.room_types
@all_options = @hotel.options
@rooms = []
@options = []
@extra_guests = []
# # Display rooms/options for category
if params[:room_type].present?
@rooms = RoomType.find(params[:room_type]).rooms
@options = RoomType.find(params[:room_type]).options
@extra_guests = RoomType.find(params[:room_type]).extra_guests
end
if request.xhr?
respond_to do |format|
format.json {
render json: {rooms: @rooms, options: @options, extra_guests: @extra_guests}
}
end
end
authorize @reservation
end
private
def reservation_params
params.require(:reservation).permit(:arrival, :departure, :payment, :reservation_contact_id, option_ids:[],
reservation_contact_attributes: [:id, :first_name,
:last_name, :first_name, :last_name, :zipcode, :city, :street, :street_number,
:email, :phone, :date_of_birth, :country, :company, :gender, :vat_number],
rooms_attributes: [:id,:name, :room_type_id,
room_types_attributes: [:id, :name]],
reservation_options_attributes: [:id, :option_id, :option_quantity, :_destroy,
options_attributes: [:id, :name, :room_type_id, :description,
room_types_attributes:[:id, :name]]],
reservation_extra_guests_attributes: [:id, :extra_guest_id, :extra_guest_quantity, :_destroy,
extra_guests_attributes: [:id, :name, :room_type_id, :age_table_id,
room_types_attributes:[:id, :name]]])
end
模型
class Reservation < ApplicationRecord
belongs_to :hotel
belongs_to :room
has_many :reservation_options, inverse_of: :reservation, dependent: :destroy
accepts_nested_attributes_for :reservation_options
has_many :options, through: :reservation_options
end
class Room < ApplicationRecord
belongs_to :room_type
validates :name, presence: true
has_many :reservations, dependent: :destroy
accepts_nested_attributes_for :room_type
end
class RoomType < ApplicationRecord
belongs_to :hotel
has_many :rooms, dependent: :destroy
accepts_nested_attributes_for :rooms, allow_destroy: true
has_many :options, dependent: :destroy
accepts_nested_attributes_for :options, allow_destroy: true
end
class Option < ApplicationRecord
belongs_to :room_type
has_many :reservation_options, dependent: :destroy
has_many :option_prices, dependent: :destroy, inverse_of: :option
end
输出响应
console.log(response); =>
{rooms: Array(3), options: Array(2), extra_guests: Array(1)}
rooms: (3) [{…}, {…}, {…}]
extra_guests: [{…}]
options: Array(2)
0: {id: 109, room_type_id: 185, name: "Amazing option", description: "", rank: null, …}
1: {id: 110, room_type_id: 185, name: "Second option", description: "", rank: null, …}
length: 2__proto__: Array(0)__proto__: Object
console.log(options); =>
0: {id: 109, room_type_id: 185, name: "Amazing option", description: "", rank: null, …}
1: {id: 110, room_type_id: 185, name: "Second option", description: "", rank: null, …}
length: 2
__proto__: Array(0)
console.log($("#room_type-options").html(response)); =>
jQuery.fn.init {context: document, selector: "#room_type-options"}
首先，我想我会让我的路线看起来像这样：
Rails.application.routes.draw do
resources :hotels do
resources :room_types, shallow: true do
scope module: :room_types do
resources :options, only: [:index]
end
end
end
end
这将为您提供：
room_type_options GET /room_types/:room_type_id/options(.:format) room_types/options#index
hotel_room_types GET /hotels/:hotel_id/room_types(.:format) room_types#index
POST /hotels/:hotel_id/room_types(.:format) room_types#create
new_hotel_room_type GET /hotels/:hotel_id/room_types/new(.:format) room_types#new
edit_room_type GET /room_types/:id/edit(.:format) room_types#edit
room_type GET /room_types/:id(.:format) room_types#show
PATCH /room_types/:id(.:format) room_types#update
PUT /room_types/:id(.:format) room_types#update
DELETE /room_types/:id(.:format) room_types#destroy
hotels GET /hotels(.:format) hotels#index
POST /hotels(.:format) hotels#create
new_hotel GET /hotels/new(.:format) hotels#new
edit_hotel GET /hotels/:id/edit(.:format) hotels#edit
hotel GET /hotels/:id(.:format) hotels#show
PATCH /hotels/:id(.:format) hotels#update
PUT /hotels/:id(.:format) hotels#update
DELETE /hotels/:id(.:format) hotels#destroy
如果需要和/或需要，您可以使用only:或except:来限制生成的路由。例如，您可以执行以下操作：
Rails.application.routes.draw do
resources :hotels, only: [] do
resources :room_types, only: [], shallow: true do
scope module: :room_types do
resources :options, only: [:index]
end
end
end
end
并且只是：
room_type_options GET /room_types/:room_type_id/options(.:format) room_types/options#index
你也可以通过做同样的事情：
Rails.application.routes.draw do
get 'room_types/:room_type_id/options', to: 'room_types/options#index'
end
无论哪个漂浮你的船...
然后，我会将我的 js 更改为更像这样的东西：
<%= simple_form_for [@hotel, @reservation] do |f|%>
<%= f.simple_fields_for :rooms do |room| %>
<%= room.input :room_type, collection: @room_type_list, input_html:{
id: "room_type"
}%>
<% end %>
<h4>Options</h4>
<div id="room-type-options">
<!-- List all options for room_type by name and display field for option_quantity -->
</div>
<% end %>
<script >
// dynamic options for change category
$(document).on("change", "#room_type", function(){
var room_type = $(this).val();
var room_type_id = # do something here...
$.ajax({
url: "/room_types/#{room_type_id}/options",
method: "GET",
dataType: "json",
error: function (xhr, status, error) {
console.error('AJAX Error: ' + status + error);
},
success: function (response) {
console.log(response);
$("#room-type-options").html(response)
}
});
});
</script>
这里有几点需要注意：
- 您需要一个具有
index操作的RoomTypes::OptionsController index操作应返回房间类型选项的 html blob- 您不需要传递
hotel_id，因为RoomType belongs_to :hotel和hotel_id因此可以从RoomType(因此shallow: true位(派生(如果需要(。您可以在 Rails Routing from the Outside in 指南中阅读有关此内容的更多信息 - 您需要自己填写
var room_type_id =位。您应该能够从room.input中获得它，但可能需要稍微调整一下您的代码 - 我不确定 $("#room-type-options").html(response)位在方向上是正确的，但可能需要摆弄，因为我忘记了响应结构是什么- 该
<div id="room-type-options">位可能是正确的，也可能是不正确的。我不知道有多久没有手工制作的html。(我使用哈姆尔。
您可以通过在app/controllers/room_types文件夹中创建options_controller.rb文件来实现RoomTypes::OptionsController。它看起来像任何其他控制器：
# app/controllers/room_types/options_controller.rb
class RoomTypes::OptionsController < ApplicationController
def index
@room_type = RoomType.find_by(params[:room_type_id])
... do some stuff ...
... render some html ...
... do a happy dance ...
end
end
由于此控制器是命名空间的，因此您可以在拥有常规OptionsController和RoomTypesController的同时拥有它，并且不会有任何冲突。