获取当前餐厅的id yii2

Question

我页面有餐厅预订单，有时间选择。

现在在这里，使用 json，我从数据库中获取餐厅每天的工作时间，并在 javascript 中获取这些数据并隐藏额外的时间。

只剩下一件事要做，那就是获取当前餐厅的ID。

现在在脚本中我手动写下ID：

let restaurantID = 1;

我在每个餐厅的页面上都有这个表格，相应地，当前餐厅的ID是已知的，我只需要将它传递到javascript。

如何在 php 页面中执行此操作？我正在使用 yii2 框架。

我是否需要像 $restaurant->id 那样以某种方式在页面本身上获取它，然后将其传递给脚本或者执行此操作的最佳方法是什么？

let restaurantReserve = {
  init: function() {
    let _self = this;

    $('[aria-labelledby="reservation-time"] li a').click(function() {
      $(this).closest('ul').find('a').removeClass('active');
      $(this).addClass('active');
      let input = $('[name="RestaurantReservationForm[time]"]');
      input.val($(this).data('value'));
      _self.unSetError(input);
      $('#reservation-time .js-value').text($(this).text());
    });
  },
  setError: function(ob) {
    $('#' + ob.data('btnId')).addClass('btn-error');
  },
  unSetError: function(ob) {
    $('#' + ob.data('btnId')).removeClass('btn-error');
  }
}
restaurantReserve.init();

let json = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "9.30",
  "close": "14.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 87,
  "restaurant_id": 1,
  "day": "Tue",
  "open": "3.00",
  "close": "21.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "2.30",
  "close": "7.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 90,
  "restaurant_id": 1,
  "day": "Fri",
  "open": "3.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:56:15"
}, /*{"id":91,"restaurant_id":1,"day":"Sat","open":"1.30","close":"4.30","created_at":"2022-02-22 10:56:15"},*/ {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "0",
  "close": "4.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 107,
  "restaurant_id": 3,
  "day": "Mon",
  "open": "1.30",
  "close": "19.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 108,
  "restaurant_id": 3,
  "day": "Tue",
  "open": "5.30",
  "close": "8.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 109,
  "restaurant_id": 3,
  "day": "Wed",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 110,
  "restaurant_id": 3,
  "day": "Thu",
  "open": "1.00",
  "close": "12.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 111,
  "restaurant_id": 3,
  "day": "Fri",
  "open": "2.30",
  "close": "12.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 112,
  "restaurant_id": 3,
  "day": "Sat",
  "open": "4.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 113,
  "restaurant_id": 3,
  "day": "Sun",
  "open": "4.00",
  "close": "22.30",
  "created_at": "2022-02-22 10:58:59"
}];

function getWorkHours(json, restaurant_id) {
  return json.filter(item => item.restaurant_id == restaurant_id);
}

function getWorkHoursForDay(json, restaurant_id, day) {
  return getWorkHours(json, restaurant_id).filter(item => item.day === day)[0];
}

function filterTimes() {
  let restaurantID = 1;
  let dayofweek = document.getElementById("dayofweek").value;
  if ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek) >= 0)) {
    let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
    let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
    for (let item of items) {
      let itemValueParts = item.innerText.split(" ");
      itemValue = parseFloat(itemValueParts[0]) + (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
      item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
    }
  }
}

.btn {
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-fourth {
  text-decoration: none;
  background: #e3e5e8;
  color: #747b8b;
}

.btn-fourth:hover {
  background: #747b8b;
  color: #fff;
}

.invisible {
  display: none;
}

ul.with-out>li:before,
.dropdown-menu li:before,
ul.whithout>li:before {
  display: none;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu-height-fixed {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:active {
  background: red;
}

.block-shadow {
  box-shadow: 0 2px 8px 0 rgba(32, 35, 44, 0.05);
}

.block-white {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="reservation" action="/restaurants/123/" method="post">
  <div class="block-shadow block-white mb-4">
    <div class="btn-s">
      <a class="btn btn-fourth " id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon br-clock"></span> <span class="js-value">
                        -- : --                </span>
      </a>

      <select id="dayofweek" onchange="filterTimes()">
        <option>Please Select Day</option>
        <option value="Mon">Mon</option>
        <option value="Tue">Tue</option>
        <option value="Wed">Wed</option>
        <option value="Thu">Thu</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
      </select>
      <ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
        <li><a class="dropdown-item " href="#" data-value="0.00">00.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="0.30">00.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="1.00">01.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="1.30">01.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="2.00">02.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="2.30">02.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="3.00">03.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="3.30">03.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="4.00">04.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="4.30">04.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.00">05.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.30">05.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.00">06.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.30">06.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="7.00">07.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="7.30">07.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="8.00">08.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="8.30">08.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="9.00">09.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="9.30">09.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="10.00">10.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="10.30">10.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="11.00">11.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="11.30">11.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="12.00">00.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="12.30">00.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="13.00">01.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="13.30">01.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="14.00">02.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="14.30">02.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="15.00">03.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="15.30">03.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="16.00">04.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="16.30">04.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="17.00">05.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="17.30">05.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="18.00">06.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="18.30">06.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="19.00">07.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="19.30">07.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="20.00">08.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="20.30">08.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="21.00">09.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="21.30">09.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="22.00">10.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="22.30">10.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="23.00">11.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="23.30">11.30 PM</a></li>
      </ul>
    </div>
    
    <div class="form-group field-restaurantreservationform-time">
      <input type="hidden" id="restaurantreservationform-time" class="form-control" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
    </div>

Answer 1

您需要将 restaurantID 传递给 filterTimes() 函数。

我会这样做：

将您的 filterTimes 函数更改为：

function filterTimes(restaurantID) { //pass restaurantID as a parameter
    
      let dayofweek = document.getElementById("dayofweek").value;
      if ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek) >= 0)) {
        let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
        let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
        for (let item of items) {
          let itemValueParts = item.innerText.split(" ");
          itemValue = parseFloat(itemValueParts[0]) + (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
          item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
        }
      }
    }

然后，当您在星期几 select 中设置 onchange 事件时，通过将 php 值回显到页面中来将 id 传递给它，如下所示：

<select id="dayofweek" onchange="filterTimes('<?= $restaurant->id ?>')">
        <option>Please Select Day</option>
        <option value="Mon">Mon</option>
        <option value="Tue">Tue</option>
        <option value="Wed">Wed</option>
        <option value="Thu">Thu</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
</select>

Answer 2

通过 json

传递了 id

$this->registerJs('let restaurantID = '. Json::encode($restaurant->id) .';', View::POS_END);

如果还有其他选择，我也准备看看

获取当前餐厅的id yii2

Get the id of the current restaurant yii2

html

javascript

php

yii2