Hello, everyone!
So I’m stuck with this. I want to change background colors of divs when the ajax response has a type of value (specifically = "BusyChair").
I have a picture in the background where I drew divs. I know there should be a better way, but this is what I’m came up with. So we have many more chairs, I just wanted to point out how it is working.
HTML + JS part + CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#roomName{
width:8%;
height:5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
article {
position: relative;
float: right;
width: 100%;
background-color: white;
}
#chair01 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
#chair02 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
#chair03 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
</style>
</head>
<body>
<nav><!-- basic navbar --></nav>
<article>
<div>
<div id="roomName">ROOM NAME</div>
<div id="chair01"></div>
<div id="chair02"></div>
<div id="chair03"></div>
<img id='background'>
</div>
</article>
<script src="useful/jquery.min.js"></script>
<script>
var locations;
var date_times;
var i;
var text ='';
setInterval(() => {
$.ajax({
type: "POST",
url: 'PHP/chair_stat.php',
success: function(data,result) {
$.each(data,function(key,item){
locations = item.Location;
date_times = item.Date_Time;
if(locations.includes('chair01')){
document.getElementById('chair01').style.backgroundColor="#00d61d";
}
});
}
});
}, 1000);
</script>
<script>
document.getElementById('background').src='Resources/Pictures/MainBuilding/AllRooms.PNG';
document.getElementById('background').style.width ='98%'
document.getElementById('background').style.border ='solid';
</script>
</body>
</html>
PHP:
<?php
require ('connect_to_db.php');
$sql = "SELECT * FROM actual_location_status WHERE Status='BusyChair' ORDER BY Date_Time";
$sql_param = mysqli_query($conn,"SELECT parameter_data FROM all_parameters WHERE name_of_parameter = 'Normal_Busy_Time'");
$row_param = mysqli_fetch_row($sql_param);
$time_left;
$time_left = $row_param[0];
$result = $conn->query($sql);
$gathered = [];
while ($row = $result->fetch_assoc()) {
$gathered[] =$row;
}
header('Content-Type: application/json');
echo json_encode($gathered);
?>
What should happen.
- View the page with all the chairs on it. (with greyish background color).
- Asking data every second and if a chair gets busy, must recolor the background color to green.
- Theres is a "Normal_Busy_Time" which is 01:30:00 (H-m-s) and a "Time_When_Gets_Busy" for ex.:2021-02-16 11:45:30. When the Time_When_Gets_Busy + Normal_Busy_Time passes I need to recolor the background of the div to red. I didn’t even got so far, because the first two part is got me stuck.
I don’t need a complete solution, I just need a path to go along with.
Questions:
- Do I use the ajax response correctly? (I mean I get a Json obj wich I parse to a string).
- Was this approach any good? (I mean my mind is already bugging me about this solution is garbage)
- Ideas are welcomed, I can restrat this from scratch. (Especially if there is an approach that make my code look atleast a little bit cleaner). Keep in mind there are 80 chairs in a Room and 4 rooms I have to take care of.
As value of
Loc
and yourid
are same you can directly target that inside youreach
loop using$("div[data-id=" + locations.toLowerCase() + "]")
and then background color of that div . Also, usedata-id
instead of id and generate those divs usingfor-loop
.Demo Code :