Como puedo guardar el estado de botones si es verde o rojo en PHP y Ajax

Estoy con un proyecto de parking el cual tengo 15 botones que son los cajones, tengo la funcionalidad ya creado en javascript al dar clic cambia a rojo hasta ahí dar otra ves clic vuelva a verde hasta ahí todo bien, pero quiero que se mantenga ese color como ocupado o desocupado, ya sea cuando se cierre el sistema y vuelva abrirlo se mantenga ese color.

Tengo una base de datos con una tabla llamada Nivel con sus respectivas columnas idCajon y estatus no se si llenarlas antes en el mismo gestor BD,

Ya que también ahí he visto comentarios de otras preguntas que se puedo realizar por medio de Ajax y Php ya que tengo muy poco conocimiento de estas tecnologías y estoy empezando en sistemas web, les agradecería sus conocimientos.

En la función de javascript me comentaron que creara la petición para actualizar en la base de datos, pero no logro crearlo.

HTML de los cajones

<div id="cajones" class="contendo">
  <tr>
    <button class="cajon" name="cajon">Cajon 1</button>
    <button class="cajon" name="cajon">Cajon 2</button>
    <button class="cajon" name="cajon">Cajon 3</button>
    <button class="cajon" name="cajon">Cajon 4</button>
    <button class="cajon" name="cajon">Cajon 5</button>
    <button class="cajon" name="cajon">Cajon 6</button>
    <button class="cajon" name="cajon">Cajon 7</button>
    <button class="cajon" name="cajon">Cajon 8</button>
    <button class="cajon" name="cajon">Cajon 9</button>
    <button class="cajon" name="cajon">Cajon 10</button>
    <button class="cajon" name="cajon">Cajon 11</button>
    <button class="cajon" name="cajon">Cajon 12</button>
    <button class="cajon" name="cajon">Cajon 13</button>
    <button class="cajon" name="cajon">Cajon 14</button>
    <button class="cajon" name="cajon">Cajon 15</button>
  </tr>

Función en Javascript  que hace los cambios de color del botón

function estatusCajon(e) {
  let boton = e.target;
  boton.classList.toggle("ocupado");
  let ocupado = boton.classList.contains("ocupado");
  let cajon = boton.textContent.replace("Cajon ", "");
  console.log(cajon, ocupado);
en esta parate me comentaron que tengo que poner la petición de ajax
para actualizar la base de datos
}
document.addEventListener("DOMContentLoaded", () => {
  let cajones = document.querySelectorAll(".cajon");
  cajones.forEach((cajon) => {
    cajon.addEventListener("click", estatusCajon);
  });
});

Código php para actualizar

<?php
   $id=$_GET['id'];
    include("conexion.php");
    if (isset($_POST['cajon'])){
    $estatus = $_POST["estatus"];
$SQL_UPADTE =" UPDATE nivel1 SET estatus = '$estatus' WHERE idCajon = '$id'";
$RESUL =$conexion ->query($SQL_UPADTE);
if (!$RESUL) {
    echo 'Error al modificar los datos';
} else {
    header ("location: registro.php");
}
}
mysqli_close($conexion);
   ?>

Base de datos  tengo llenado como estatus Disponible

Aquí tengo el demo de los cajones:

https://jsfiddle.net/Angel82/ez8myfsa/55/ 

1 Respuesta

Respuesta

Hola Elena salgado

Efectivamente, es correcto lo que comentas.

La petición Ajax la puedes hacer usando un objeto tipo XMLHttpRequest o tal vez también usando fetch.

Te puede servir este artículo para comprender un poco mejor el tema de Ajax y en https://youtu.be/snzOxXMHRF4 y https://youtu.be/GCaHIhcsFT8 puedes ver algo más de sintaxis.

Consúltame si te quedan dudas ;)

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas