javascript - 从 jquery 生成一个 simple_form 字段

Question

我想根据 JSON/Jquery 输入生成 simple_form_fields。

在我的用例中，用户可以预订房间。用户首先提供一个 room_type。基于此输入：

• 用户可以通过显示属于此 room_type 的房间的下拉菜单来选择房间工作:) -->请参阅下面的代码以供参考
• 用户可以看到属于此 room_type 的所有选项，其中一个字段显示他们想要订购的 option_quantity。不工作

工作室示例 +底部的选项部分

<%= simple_form_for [@hotel, @reservation] do |f|%>
  <%= f.simple_fields_for :rooms do |room| %>

  //input for rooms and options
  <%= room.input :room_type, collection: @room_type_list, input_html:{
  id: "room_type"
  }%>

  //rooms belonging to selected room_type are displayed below with dropdown

  <%= f.association :room, collection: @rooms, input_html:{
  value: @rooms.object_id,
  id: "dynamic-rooms"
  } %>

<% end %>
<% end %>

$(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) {
      console.log(response);

      // Display rooms belonging to selected room_type (working)
      var rooms = response["rooms"];
      $("#dynamic-rooms").empty();

      $("#dynamic-rooms").append('<option>Select room</option>');
      for(var i=0; i< rooms.length; i++){
        $("#dynamic-rooms").append('<option value="' + rooms[i]["id"] + '">' + rooms[i]["name"] + '</option>');
      }

      // Display options belonging to room_type (not working)
      var options = response["options"];
      console.log(response)
      console.log(rooms)
      console.log(options)
    }
  });
  });

输出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(rooms)-->参考，用于代码的工作部分

(3) [{…}, {…}, {…}]
0: {id: 266, name: "1", room_type_id: 185, created_at: "2019-10-10T11:00:07.864Z", updated_at: "2019-10-10T11:00:07.864Z"}
1: {id: 267, name: "2", room_type_id: 185, created_at: "2019-10-10T11:00:07.865Z", updated_at: "2019-10-10T11:00:07.865Z"}
2: {id: 268, name: "3", room_type_id: 185, created_at: "2019-10-10T11:00:07.866Z", updated_at: "2019-10-10T11:00:07.866Z"}
length: 3
__proto__: Array(0)

输出console.log(options)

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

预订控制器

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

标签： javascriptjqueryruby-on-railssimple-form