I have a restaurant reservation form on the page, and there is a time selection.
Now here, using json, I get the working time for each day of the restaurant from the database, and in the javascript I take this data and hide the extra time.
Now everything works as it should, but only when the data for all days of the week is filled in. But it happens that there may be a day off, and accordingly there will be no data for this day of the week.
And now if we remove the data for some day from the let json list, we will get the following error (you can see in the snippet, I removed the data for Thursday):
Uncaught TypeError: Cannot read properties of undefined (reading 'open').
How can I make it so that when a day is selected for which there is no data, instead of this error there is just an empty list? And it is also important that the click button ceases to be clickable.
I added this piece of code to the script after this line let workHours:
if (!workHours) {
let btn = document.getElementById("reservation-time");
btn.style.display = "inline-block";
btn.style.pointerEvents = "none";
return
}
And now, when you select a day for which there is no data, the button is disabled. But the problem is that it ends up being disabled, and when you switch to another day, it remains disabled. How can I fix this and make it disabled only for the day for which there is no data?
Also, in addition, I would like the time list to be empty for the selected day where there is no data, since there is now time left from the previous day.
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": 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": "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"
}];
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);
if (!workHours) {
let btn = document.getElementById("reservation-time");
btn.style.display = "inline-block";
btn.style.pointerEvents = "none";
return
}
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 >
<div >
<a id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span ></span> <span >
click </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 aria-labelledby="reservation-time">
<li><a href="#" data-value="0.00">00.00 PM</a></li>
<li><a href="#" data-value="0.30">00.30 AM</a></li>
<li><a href="#" data-value="1.00">01.00 AM</a></li>
<li><a href="#" data-value="1.30">01.30 AM</a></li>
<li><a href="#" data-value="2.00">02.00 AM</a></li>
<li><a href="#" data-value="2.30">02.30 AM</a></li>
<li><a href="#" data-value="3.00">03.00 AM</a></li>
<li><a href="#" data-value="3.30">03.30 AM</a></li>
<li><a href="#" data-value="4.00">04.00 AM</a></li>
<li><a href="#" data-value="4.30">04.30 AM</a></li>
<li><a href="#" data-value="5.00">05.00 AM</a></li>
<li><a href="#" data-value="5.30">05.30 AM</a></li>
<li><a href="#" data-value="6.00">06.00 AM</a></li>
<li><a href="#" data-value="6.30">06.30 AM</a></li>
<li><a href="#" data-value="7.00">07.00 AM</a></li>
<li><a href="#" data-value="7.30">07.30 AM</a></li>
<li><a href="#" data-value="8.00">08.00 AM</a></li>
<li><a href="#" data-value="8.30">08.30 AM</a></li>
<li><a href="#" data-value="9.00">09.00 AM</a></li>
<li><a href="#" data-value="9.30">09.30 AM</a></li>
<li><a href="#" data-value="10.00">10.00 AM</a></li>
<li><a href="#" data-value="10.30">10.30 AM</a></li>
<li><a href="#" data-value="11.00">11.00 AM</a></li>
<li><a href="#" data-value="11.30">11.30 AM</a></li>
<li><a href="#" data-value="12.00">00.00 AM</a></li>
<li><a href="#" data-value="12.30">00.30 PM</a></li>
<li><a href="#" data-value="13.00">01.00 PM</a></li>
<li><a href="#" data-value="13.30">01.30 PM</a></li>
<li><a href="#" data-value="14.00">02.00 PM</a></li>
<li><a href="#" data-value="14.30">02.30 PM</a></li>
<li><a href="#" data-value="15.00">03.00 PM</a></li>
<li><a href="#" data-value="15.30">03.30 PM</a></li>
<li><a href="#" data-value="16.00">04.00 PM</a></li>
<li><a href="#" data-value="16.30">04.30 PM</a></li>
<li><a href="#" data-value="17.00">05.00 PM</a></li>
<li><a href="#" data-value="17.30">05.30 PM</a></li>
<li><a href="#" data-value="18.00">06.00 PM</a></li>
<li><a href="#" data-value="18.30">06.30 PM</a></li>
<li><a href="#" data-value="19.00">07.00 PM</a></li>
<li><a href="#" data-value="19.30">07.30 PM</a></li>
<li><a href="#" data-value="20.00">08.00 PM</a></li>
<li><a href="#" data-value="20.30">08.30 PM</a></li>
<li><a href="#" data-value="21.00">09.00 PM</a></li>
<li><a href="#" data-value="21.30">09.30 PM</a></li>
<li><a href="#" data-value="22.00">10.00 PM</a></li>
<li><a href="#" data-value="22.30">10.30 PM</a></li>
<li><a href="#" data-value="23.00">11.00 PM</a></li>
<li><a href="#" data-value="23.30">11.30 PM</a></li>
</ul>
</div>
<div >
<input type="hidden" id="restaurantreservationform-time" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
</div>CodePudding user response：
Instead of disabling the buttons, why not disable the times on the days where there are no times.
I made some modifications, the times start off as invisible and get enabled when you change the date. If we get an empty result when looking up the work day, we default to an object with an opening time of 24 and a closing time of 0 (so there will be no matches).
I added an onclick event to the button to show you how to validate the click (only do something when both day and time are selected) and I cleared the time data and changed the button back to click when someone changes the day.
UPDATE Since the click button is not actually a button, I added a mouseover event to check whether the day is valid or not. If it is, we add a class (which was previously :hover in the css) to the button so that we can get hover effects. On mouseout, we remove it.
Again, in regards to the click handling, I specifically check whether the day is valid and return false if it is not, thereby doing nothing (in effect disabling the button).
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": 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": "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"
}];
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() {
const btn = document.querySelector('#reservation-time .js-value');
let restaurantID = 1;
let dayofweek = document.getElementById("dayofweek").value;
//Clear click button
document.querySelector('#restaurantreservationform-time').value = '';
btn.innerHTML = 'click';
if ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek) >= 0)) {
let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
//btn.style.color = workHours ? "#747b8b" : "#f3f5f8";
//btn.style.color = workHours ? "#747b8b" : "#f3f5f8";
workHours = workHours || { open: 24, close: 0};
let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
for (let item of items) {
let itemValue = parseFloat(item.getAttribute('data-value'));
item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
}
}
}
const doAction = function() {
let restaurantID = 1;
let selectedTime = document.querySelector('#restaurantreservationform-time').value;
let selectedDay = document.getElementById('dayofweek').value;
let workHours = getWorkHoursForDay(json, restaurantID, selectedDay);
//Do validation here:
if (!workHours) {
return false;
}
if (!selectedTime) {
alert('Please select a time.');
return false;
}
//Success, do something
alert('action: ' selectedDay ' ' selectedTime);
}
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());
});
$('#reservation-time').mouseover(function() {
let restaurantID = 1;
let time = $('[name="RestaurantReservationForm[time]"]').val();
let day = $('#dayofweek').val();
let workHours = getWorkHoursForDay(json, restaurantID, day);
let addOrRemove = workHours ? 'addClass' : 'removeClass';
$(this)[addOrRemove]('btn-fourth-hover');
});
$('#reservation-time').mouseout(function() {
$(this).removeClass('btn-fourth-hover');
});
},
setError: function(ob) {
$('#' ob.data('btnId')).addClass('btn-error');
},
unSetError: function(ob) {
$('#' ob.data('btnId')).removeClass('btn-error');
}
}
restaurantReserve.init();.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 >
<div >
<a id="reservation-time" role="button" onclick="doAction()" data-bs-toggle="dropdown" aria-expanded="false">
<span ></span> <span >
click </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 aria-labelledby="reservation-time">
<li ><a href="#" data-value="0.00">00.00 AM</a></li>
<li ><a href="#" data-value="0.30">00.30 AM</a></li>
<li ><a href="#" data-value="1.00">01.00 AM</a></li>
<li ><a href="#" data-value="1.30">01.30 AM</a></li>
<li ><a href="#" data-value="2.00">02.00 AM</a></li>
<li ><a href="#" data-value="2.30">02.30 AM</a></li>
<li ><a href="#" data-value="3.00">03.00 AM</a></li>
<li ><a href="#" data-value="3.30">03.30 AM</a></li>
<li ><a href="#" data-value="4.00">04.00 AM</a></li>
<li ><a href="#" data-value="4.30">04.30 AM</a></li>
<li ><a href="#" data-value="5.00">05.00 AM</a></li>
<li ><a href="#" data-value="5.30">05.30 AM</a></li>
<li ><a href="#" data-value="6.00">06.00 AM</a></li>
<li ><a href="#" data-value="6.30">06.30 AM</a></li>
<li ><a href="#" data-value="7.00">07.00 AM</a></li>
<li ><a href="#" data-value="7.30">07.30 AM</a></li>
<li ><a href="#" data-value="8.00">08.00 AM</a></li>
<li ><a href="#" data-value="8.30">08.30 AM</a></li>
<li ><a href="#" data-value="9.00">09.00 AM</a></li>
<li ><a href="#" data-value="9.30">09.30 AM</a></li>
<li ><a href="#" data-value="10.00">10.00 AM</a></li>
<li ><a href="#" data-value="10.30">10.30 AM</a></li>
<li ><a href="#" data-value="11.00">11.00 AM</a></li>
<li ><a href="#" data-value="11.30">11.30 AM</a></li>
<li ><a href="#" data-value="12.00">12.00 PM</a></li>
<li ><a href="#" data-value="12.30">00.30 PM</a></li>
<li ><a href="#" data-value="13.00">01.00 PM</a></li>
<li ><a href="#" data-value="13.30">01.30 PM</a></li>
<li ><a href="#" data-value="14.00">02.00 PM</a></li>
<li ><a href="#" data-value="14.30">02.30 PM</a></li>
<li ><a href="#" data-value="15.00">03.00 PM</a></li>
<li ><a href="#" data-value="15.30">03.30 PM</a></li>
<li ><a href="#" data-value="16.00">04.00 PM</a></li>
<li ><a href="#" data-value="16.30">04.30 PM</a></li>
<li ><a href="#" data-value="17.00">05.00 PM</a></li>
<li ><a href="#" data-value="17.30">05.30 PM</a></li>
<li ><a href="#" data-value="18.00">06.00 PM</a></li>
<li ><a href="#" data-value="18.30">06.30 PM</a></li>
<li ><a href="#" data-value="19.00">07.00 PM</a></li>
<li ><a href="#" data-value="19.30">07.30 PM</a></li>
<li ><a href="#" data-value="20.00">08.00 PM</a></li>
<li ><a href="#" data-value="20.30">08.30 PM</a></li>
<li ><a href="#" data-value="21.00">09.00 PM</a></li>
<li ><a href="#" data-value="21.30">09.30 PM</a></li>
<li ><a href="#" data-value="22.00">10.00 PM</a></li>
<li ><a href="#" data-value="22.30">10.30 PM</a></li>
<li ><a href="#" data-value="23.00">11.00 PM</a></li>
<li ><a href="#" data-value="23.30">11.30 PM</a></li>
</ul>
</div>
<div >
<input type="hidden" id="restaurantreservationform-time" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
</div>