Ajax response div color modification

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 your id are same you can directly target that inside your each loop using $("div[data-id=" + locations.toLowerCase() + "]") and then background color of that div . Also, use data-id instead of id and generate those divs using for-loop .

Demo Code :

//suppose data look like this
var data = [{
    Loc: "CH01",
    Stat: "BusyChair",
    Date_Time: "2021-02-16 10:45:30"
  },
  {
    Loc: "CH03",
    Stat: "BusyChair",
    Date_Time: "2021-02-16 10:45:30"
  }
]
$.each(data, function(key, item) {
  locations = item.Loc;
  $("div[data-id=" + locations.toLowerCase() + "]").css("background-color", "yellow"); //change bg color where data-id matches
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
  <div id="roomName"><b>RoomName 01-03</b></div>
  <div data-id="ch01">1</div>
  <div data-id="ch02">2</div>
  <div data-id="ch03">3</div>
</article>

Ajax response div color modification

1 thought on “Ajax response div color modification”

Leave a Comment Cancel reply