【民泊5.1】【MacOSX】AJAX検索

「app\views\rooms」フォルダに「_rooms_list.html.erb」ファイルを新規作成して下さい。


app\views\rooms\_rooms_list.html.erb(新規作成したファイル)

<% rooms.each do |room| %>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading preview">
          <%= image_tag room.cover_photo(:medium) %>
        </div>
        <div class="panel-body">
          <%= link_to room.listing_name, room %><br/>
          <%= number_to_currency(room.price) %> | <%= room.home_type %> | ベッド<%= room.bed_room %>台
          <div id="star_<%= room.id %>"></div> <%= pluralize(room.average_rating, "review") %>
        </div>
      </div>
    </div>

    <script>
      $('#star_<%= room.id %>').raty({
        path: '/assets',
        readOnly: true,
        score: <%= room.average_rating %>
      });
    </script>
<% end %>

記述更新　app\views\pages\search.html.erb
90行目の記述（レンダー）と147行目からのスクリプトを更新しています。
コードをコピーしてファイルを置き換えて下さい。

<div id="main">
  <div id="left">

    <!-- 検索パネル -->
    <div class="row">
      <br/>

      <div id="collapsePanel">
          <%= search_form_for @search, url: search_path, remote: true do |f| %>
              <div class="row">
                <div class="col-md-8">
                  <label>宿泊費（円）</label>
                </div>
                <div class="col-md-2">
                  <label>最低（円）</label>
                  <%= f.text_field :price_gteq, class: "form-control" %>
                </div>
                <div class="col-md-2">
                  <label>最高（円）</label>
                  <%= f.text_field :price_lteq, class: "form-control" %>
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-6">
                  <%= text_field_tag :start_date, params[:start_date], readonly: true, placeholder: "チェックイン日", class: "form-control datepicker" %>
                </div>
                <div class="col-md-6">
                  <%= text_field_tag :end_date, params[:end_date], readonly: true, placeholder: "チェックアウト日", class: "form-control datepicker" %>
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-4">
                  <%= check_box_tag "q[room_type_eq_any][]", "プライベート" %> プライベート
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[room_type_eq_any][]", "シェア" %> シェア
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group select">
                    <label>宿泊人数</label>
                    <%= f.select :accommodate_gteq, [["1人", 1], ["2人", 2], ["3人", 3], ["4人以上", 4]], id: "accommodate", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group select">
                    <label>ベッド数</label>
                    <%= f.select :bed_room_gteq, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], id: "bed_room", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group select">
                    <label>部屋数</label>
                    <%= f.select :bath_room_gteq, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋以上", 4]], id: "bath_rooms", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
              </div>
              <hr/>

              <div class="row">
                <div class="col-md-4">
                  <%= check_box_tag "q[is_tv_eq]", true %> テレビ
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_kitchen_eq]", true %> キッチン
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_Internet_eq]", true %> インターネット
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_heating_eq]", true %> 暖房
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_air_eq]", true %> エアコン
                </div>
              </div>
              <hr/>
              <div class="row text-center">
                <%= f.submit "検索", class: "btn btn-form" %>
              </div>
          <% end %>
      </div>
      <br/>

      <div class="row" id="room_listing">
        <%= render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %>
      </div>
    </div>
  </div>

  <div id="right">
    <!-- GOOGLEマップ -->
    <div id="map" style="width: 100%; height: 100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize(rooms) {
          var location = {lat: 43.061771, lng: 141.354451}
          if (rooms.length > 0) {
            location = {lat: rooms[0].latitude, lng: rooms[0].longitude}
          }
          var map = new google.maps.Map(document.getElementById('map'), {
            center: location,
            zoom: 12
          });
          var marker, inforwindow;
          rooms.forEach(function(room) {
            marker = new google.maps.Marker({
              position: {lat: room.latitude, lng: room.longitude},
              map: map
            });
            inforwindow = new google.maps.InfoWindow({
              content: "<div class='map_price'>" + room.price + "円</div>"
            });
            inforwindow.open(map, marker);
          })
        }
        google.maps.event.addDomListener(window, 'load', function() {
          initialize(<%= raw @arrRooms.to_json %>)
        });
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBojDcZmScBkIOISjoYREjgid99iZUL2Tk&callback=initMap" type="text/javascript"></script>
  </div>
</div>

<script>
  $('#start_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#end_date').datepicker("option", "minDate", selected);
      $('#end_date').attr("disabled", false);
    }
  });
  $('#end_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#start_date').datepicker("option", "maxDate", selected);
    }
  });
  var open = true;
  $('#filter').click(function() {
    if (open) {
      $('#filter').html("More filters <i class='fa fa-chevron-up'></i>")
    } else {
      $('#filter').html("More filters <i class='fa fa-chevron-down'></i>")
    }
    open = !open;
  });
</script>

「app\views\pages」フォルダに「search.js.erb」ファイルを新規作成してください。


app\views\pages\search.js.erb(新規作成したファイル)

$('#room_listing').html('<%= j render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %>')
initialize(<%= raw @arrRooms.to_json %>)

ブラウザ確認
検索ページがAJAXで表示されるようになりました。
http://localhost:3000/