Como puedo actualizar el estado de botones si es verde o rojo en PHP y Ajax
Publicado por Angel (14 intervenciones) el 14/04/2021 05:15:04
Buenas tardes estoy con un proyecto de Hotel el cual tengo 15 botones que son las habitaciones, 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 Habitaciones con sus respectivas columnas idHabitacion y estatus que esta llenado como Disponible
En la petición con AJax me actualiza la basa de datos, pero me lo hace de manera completa las 15 habitaciones y no he podido que realice el cambio de color rojo como ocupado y se mantenga ese color o viceversa, ya cuando el usuario de salga del sistema y entre otro usuario vea que este ocupado esa habitación
Update.php
Este es el código que tengo en javascript:
Estilos CSS:
Mis botones de las habitaciones:
Captura de de la tabla habitaciones:
Aquí tengo el demo de las habitaciones:
https://jsfiddle.net/Angel82/Lc7o8nsp/1/
Tengo una base de datos con una tabla llamada Habitaciones con sus respectivas columnas idHabitacion y estatus que esta llenado como Disponible
En la petición con AJax me actualiza la basa de datos, pero me lo hace de manera completa las 15 habitaciones y no he podido que realice el cambio de color rojo como ocupado y se mantenga ese color o viceversa, ya cuando el usuario de salga del sistema y entre otro usuario vea que este ocupado esa habitación
Update.php
1
2
3
4
5
6
7
8
9
10
?phpinclude("conexion.php");
$SQL_UPADTE ="UPDATE habitaciones SET estatus = 'Ocupado';";
$RESUL =$conexion ->query($SQL_UPADTE);
?>
Este es el código que tengo en javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function estatusHabitacion(e) {
let btn = e.target;
btn.classList.toggle("rentado");
let rentado = btn.classList.contains("rentado");
let habitacion = boton.textContent.replace("H ", "");
onsole.log(habitacion, rentado);
// Implementación con Ajax$(document).ready(function () {
$(".habitacion").click(function () {
$.ajax({
url: "Update.php",
type: "POST",
success: function () {
alert("La habitación se ha rentado");
},
});
});
});
}document.addEventListener("DOMContentLoaded", () => {
let habitacion = document.querySelectorAll(".habitacion");
habitacion.forEach((habitacion) => {
habitacion.addEventListener("click", estatusHabitacion);
});
});
Estilos CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
button {background: #29bb89;
width: 50px; height: 50px; margin: 6px; }.rentado {
background: #f05945;
}</style>
Mis botones de las habitaciones:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="habitacion" class="contendo">
<tr>
<button class="habitacion">H 1</button>
<button class="habitacion">H 2</button>
<button class="habitacion">H 3</button>
<button class="habitacion">H 4</button>
<button class="habitacion">H 5</button>
<button class="habitacion">H 6</button>
<button class="habitacion">H 7</button>
<button class="habitacion">H 8</button>
<button class="habitacion">H 9</button>
<button class="habitacion">H 10</button>
<button class="habitacion">H 11</button>
<button class="habitacion">H 12</button>
<button class="habitacion">H 13</button>
<button class="habitacion">H 14</button>
<button class="habitacion">H 15</button>
</tr>
Captura de de la tabla habitaciones:
Aquí tengo el demo de las habitaciones:
https://jsfiddle.net/Angel82/Lc7o8nsp/1/
Valora esta pregunta
0
