[37]AJAX検索<< [ホームに戻る] >> [39]ステータス表示
記述追加 app\javascript\packs\application.js
「require("jquery-ui/ui/widgets/slider");」の記述を13行目に追加
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery'); require("jquery-ui/ui/widgets/datepicker"); require("jquery-ui/ui/widgets/slider"); require("raty-js") window.Noty = require("noty") window.Dropzone = require("dropzone") window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") $(document).on('turbolinks:load', () => { $('.toggle').on('click', (e) => { e.stopPropagation(); e.preventDefault(); $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); }) }) // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) require("trix") require("@rails/actiontext")
「app\views\pages\search.html.erb」ファイルを編集します。
1.記述追加 app\views\pages\search.html.erb(30行目)
<div class="column is-half"> <div id="slider-range"></div> </div>
2.スクリプトを追加(193行目)
<script> $(function() { $("#q_price_gteq").val('1000'); $("#q_price_lteq").val('15000'); $("#slider-range").slider({ range: true, min: 0, max: 15000, values: [1000, 15000], slide: function(event, ui) { $("#q_price_gteq").val(ui.values[0]); $("#q_price_lteq").val(ui.values[1]); } }); $(".ui-widget-header").css('background', '#00A699'); $(".ui-state-default, .ui-widget-content").css('background', 'white'); $(".ui-state-default, .ui-widget-content").css('border-color', '#00A699'); }) </script>
記述更新 app\views\pages\search.html.erb
<div id="main"> <div id="left"> <!-- 検索パネル --> <section class="section"> <div class="container"> <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="field has-addons"> <p class="control"> <%= text_field_tag :start_date, params[:start_date], readonly: true, placeholder: "チェックイン日", class: "input" %> </p> <p class="control"> <%= text_field_tag :end_date, params[:end_date], readonly: true, placeholder: "チェックアウト日", class: "input" %> </p> </div> </div> <br/> <br/> <div class="row"> <div class="col-md-8"> <label>宿泊費(円)</label> </div> <div class="column is-half"> <div id="slider-range"></div> </div> <div class="field has-addons"> <p class="control"> <%= f.text_field :price_gteq, placeholder: "最低価格", class: "input" %> </p> <p class="control"> <a class="button is-static"> 円 </a> </p> <p class="control"> <%= f.text_field :price_lteq, placeholder: "最高価格", class: "input" %> </p> <p class="control"> <a class="button is-static"> 円 </a> </p> </div> </div> <br/> <br/> <div class="row"> <div class="checkbox"> <%= check_box_tag "q[room_type_eq_any][]", "プライベート", class: "checkbox" %> プライベート </div> <div class="checkbox"> <%= check_box_tag "q[room_type_eq_any][]", "シェア", class: "checkbox" %> シェア </div> </div> <br/> <br/> <div class="row"> <div class="col-md-4"> <div class="field"> <div class="control"> <label>宿泊人数 </label> <div class="select"> <%= f.select :accommodate_gteq, [["1人", 1], ["2人", 2], ["3人", 3], ["4人以上", 4]], id: "accommodate", prompt: "選択してください", class: "select" %> </div> </div> </div> <div class="field"> <div class="control"> <label>ベッド数 </label> <div class="select"> <%= f.select :bed_room_gteq, [["1台", 1], ["2台", 2], ["3台", 3], ["4台以上", 4]], id: "bed_room", prompt: "選択してください", class: "select" %> </div> </div> </div> <div class="field"> <div class="control"> <label>部屋数 </label> <div class="select"> <%= f.select :bath_room_gteq, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋以上", 4]], id: "bath_rooms", prompt: "選択してください", class: "select" %> </div> </div> </div> </div> </div> <br/> <br/> <div class="row"> <div class="col-md-4"> <%= check_box_tag "q[is_tv_eq]", true, class: "checkbox" %> テレビ </div> <div class="col-md-4"> <%= check_box_tag "q[is_kitchen_eq]", true, class: "checkbox" %> キッチン </div> <div class="col-md-4"> <%= check_box_tag "q[is_Internet_eq]", true, class: "checkbox" %> インターネット </div> <div class="col-md-4"> <%= check_box_tag "q[is_heating_eq]", true, class: "checkbox" %> 暖房 </div> <div class="col-md-4"> <%= check_box_tag "q[is_air_eq]", true, class: "checkbox" %> エアコン </div> </div> <br/> <br/> <div class="row text-center"> <%= f.submit "検索", class: "button is-danger" %> </div> <% end %> </div> </div> </section> <!-- お部屋 --> <div class="row" id="room_listing"> <%= render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %> </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=ご自分のAPIキーを入れてください&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> <script> $(function() { $("#q_price_gteq").val('1000'); $("#q_price_lteq").val('15000'); $("#slider-range").slider({ range: true, min: 0, max: 15000, values: [1000, 15000], slide: function(event, ui) { $("#q_price_gteq").val(ui.values[0]); $("#q_price_lteq").val(ui.values[1]); } }); $(".ui-widget-header").css('background', '#00A699'); $(".ui-state-default, .ui-widget-content").css('background', 'white'); $(".ui-state-default, .ui-widget-content").css('border-color', '#00A699'); }) </script>
ブラウザ確認
http://localhost:3000/
↓↓クリックして頂けると励みになります。