Question

一段时间以来，我试图生成一个预订表，其中仅列出在同一预订表中选择的arrival和departure日期可用的房间。不幸的是，直到现在我还没有做到这一点。

我已经对先前的尝试提出了一个问题，但没有成功。 => https://stackoverflow.com/posts/59083421/edit

我现在正在寻找到达那里的其他方法。作为参考，请在下面找到我以前的尝试。

以前的尝试：总体思路

试图发送/接收AJAX。无法达到成功阶段，并且错误似乎在于AJAX调用期望/我正在发送的dataType（JS与JSON）。不幸的是，我不知道如何解决这个问题。

当我在控制器中使用format.js时，我的ajax调用未达到成功阶段
当我使用render json: {:rooms => @rooms}时，我没有到达hotels/rooms_availability.js.erb文件，因此无法插入可用的房间。

上次尝试：代码

reservations / new.html.erb

<%= simple_form_for [@hotel, @reservation] do |f|%>
  <div class="col col-sm-3">
    <%= f.input :arrival,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "start_date"} %>
  </div>
  <div class="col col-sm-3">
    <%= f.input :departure,
    as: :string,
    label:false,
    placeholder: "From",
    wrapper_html: { class: "inline_field_wrapper" },
    input_html:{ id: "end_date"} %>
  </div>

  <div class="col col-sm-4">
    <%= f.input :room_id, collection: @rooms %>
  </div>

  <%= f.button :submit, "Search", class: "create-reservation-btn"%>
<% end %>

reservations / new.html.erb的脚本

<script>
const checkIn = document.querySelector('#start_date');
const checkOut = document.querySelector('#end_date');
const checkInAndOut = [checkIn, checkOut];

checkInAndOut.forEach((item) => {
  item.addEventListener('change', (event) => {
  if ((checkIn.value.length > 0) && (checkOut.value.length > 0)){
    checkAvailability();
  }
  })
})

  function checkAvailability(){

    $.ajax({
      url: "<%= rooms_availability_hotel_path(@hotel) %>" ,
      dataType: 'json',
      type: "POST",
      data: `arrival=${start_date.value}&departure=${end_date.value}`,
      success: function(data) {
        console.log('succes')
        console.log(data);
      },
      error: function(response) {
        console.log('failure')
        console.log(response);
      }
    });
  };
</script>

hotels_controller

def rooms_availability
  hotel = Hotel.includes(:rooms).find(params[:id])
  arrival = Date.parse room_params[:arrival]
  departure = Date.parse room_params[:departure]
  time_span = arrival..departure
  @unavailable_rooms = Room.joins(:reservations).where(reservations: {hotel: hotel}).where("reservations.arrival <= ? AND ? >= reservations.departure", arrival, departure).distinct
  @hotel_cats = hotel.room_categories
  @hotel_rooms = Room.where(room_category: hotel_cats)
  @rooms = hotel_rooms - @unavailable_rooms
   render json: {:rooms => @rooms}  
#respond_to do |format|
    #format.js
  #end
end

def room_params
  params.permit(:arrival, :departure, :format, :id)
end

hotels / rooms_availability.js.erb

var selectList = document.getElementById('reservation_room_id')

function empty() {
  selectList.innerHTML = "";
}

empty();


    <% unless @rooms.empty? %>
      <% @rooms.each do |room|%>
        selectList.insertAdjacentHTML('beforeend', '<option value="<%= room.id %>"><%= room.name %></option>');
      <% end %>
    <% end %>

在下拉菜单中显示可用房间的其他方法？

0 个答案: