0

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.

Error en PHP versión 5.6.40 al momento de dar clic a un botón

Error:
Parse error: syntax error, unexpected '?' in C:\xampp\htdocs\ProyectoHotel\Update.php on line 19

Update.php

<?php
    $idHabitacion = (int) $_POST['idHabitacion'] ?? 0;
$estatus = $_POST['estatus'] ?? '';

// Verificar que habitación es mayor que cero y el estatus es correcto
if($idHabitacion > 0 && ($estatus == 'Ocupado' || $estatus == 'Disponible') {
    // Actualizar estatus especificando ID de habitación
    $consulta = "UPDATE habitaciones SET estatus = '$estatus' WHERE idHabitacion = $idHabitacion";
    // Ejecutar consulta; devolverá falso en caso de error
    if($conexion->query($consulta)) {
        echo "La habitación $idHabitacion ahora tiene estado $estatus";
    } else {
        echo 'Hubo un error al actualizar habitación';
    }
} else {
    echo 'No se recibieron correctamente ID de habitación y estatus';
}
 ?>

Este es el código que tengo en javascript:

function estatusHabitacion(e) {
    let btn = e.target;
    btn.classList.toggle("rentado");
    let rentado = btn.classList.contains("rentado");

    let habitacion = boton.textContent.replace("H ", "");
    console.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

<style>
    button {
        background: #29bb89;
        width: 50px;
        height: 50px;
        margin: 6px;
    }
    
    .rentado {
        background: #f05945;
    }
</style>

Mis botones de las habitaciones:

<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>
</div>

Captura de la tabla habitaciones:

introducir la descripción de la imagen aquí

Aquí tengo el demo de las habitaciones:

https://jsfiddle.net/Angel82/Lc7o8nsp/1/

3
  • En tu consulta SQL, no estás especificando que registro debe actualizarse, es por eso que se actualizan todos, debes pasarle el idHabitacion que quieres actualizar, así $SQL_UPADTE ="UPDATE habitaciones SET estatus = 'Ocupado' WHERE idHabitacion = $idHabitacion"; el 14 abr. 2021 a las 14:10
  • Tienes que poner un WHERE al UPDATE para que te actualice únicamente la habitación que quieres. Algo así más o menos: UPDATE .... SET .... WHERE columnaIDHabitacion = elValorDelID
    – A. Cedano
    el 14 abr. 2021 a las 14:11
  • Y, para tener el ID en el contexto del UPDATE, tienes que pasárselo al servidor, usando el parámetro data de la petición Ajax. No sé en qué contenedor o elemento del HTML tienes el id de la habitación, lo cierto es que tienes que recogerlo y agregar a Ajax algo así: data: {id_habitacion : laVariableQueRecogeElId}, y en PHP recogerla con $_POST['id_habitacion'] para usarla como criterio en el UPDATE
    – A. Cedano
    el 14 abr. 2021 a las 14:16

2 respuestas 2

2

Para que actualice una fila en específico tienes que agregar un criterio WHERE a tu consulta UPDATE.

Además, tienes que pasarle el id de la habitación al servidor en la petición Ajax para que sepa cuál es la habitación que se debe actualizar. Para ello Ajax admite un parámetro data donde puedes mandar un objeto pares {clave: valor} con los datos que quieres remitir al servidor.

Dado que las H que has puesto entorpecen un poco recoger el id limpio, vamos a agregar un atributo value a cada button para poder recoger el id limpio, sin tener que recurrir a manipulaciones de los datos. Si no te gusta esa forma puedes intentar limpiar los datos. Pero señalo que esto es más propenso a errores.

Debo decir también que hay duplicidad de código (estás asignando listeners de dos formas, usando jQuery por un lado y Javascript puro por otro) deberías regularizar eso...

Me centro en la parte que nos concierne para sugerir una solución aplicando lo dicho:

Construye los botones así:

<div id="habitacion" class="contendo">
 <tr>
 <button class="habitacion" value="1">H 1</button>
 <button class="habitacion" value="2">H 2</button>
 <button class="habitacion" value="3">H 3</button>
 <button class="habitacion" value="4">H 4</button>
 <button class="habitacion" value="5">H 5</button>
 <button class="habitacion" value="6">H 6</button>
 <button class="habitacion" value="7">H 7</button>
 <button class="habitacion" value="8">H 8</button>
 <button class="habitacion" value="9">H 9</button>
 <button class="habitacion" value="10">H 10</button>
 <button class="habitacion" value="11">H 11</button>
 <button class="habitacion" value="12">H 12</button>
 <button class="habitacion" value="13">H 13</button>
 <button class="habitacion" value="14">H 14</button>
 <button class="habitacion" value="15">H 15</button>
 </tr>
</div>

Este código bastaría para escuchar los clicks de los botones. Sugiero que luego organices mejor, decidiendo si quieres usar jQuery o Javascript puro.

// $(document).ready(function () { es obsoleto, evítalo
// Esta es la versión moderna que sustitye a document.ready
// Esto hace lo mismo que DOMContentLoaded de JS puro
$(function() {
    //Esto hace lo mismo que el listener que asignas con querySelectorAll
    $(".habitacion").click(function () {
        //Recogemos el id del botón que se presionó
        var idHabitacion=$(this).prop('value');
        $.ajax({
            url: "Update.php",
            method: "POST", //type es obsoleto
            data: {idHabitacion : idHabitacion}
        }).done(function(result){ //success es TAMBIÉN obsoleto
        alert(result);
        });
    });
});

Ahora pasamos al código PHP, recogemos el valor pasado en data y lo usamos como criterio:

$idHabitacion=!empty($_POST['idHabitacion']) ? $_POST['idHabitacion'] : NULL;

if ($idHabitacion) {
    include("conexion.php");
    # Deberías usar consultas preparadas
    # No uses comillas '' para columas numéricas
    $sql ="UPDATE habitaciones SET estatus = 'Ocupado' WHERE idHabitacion=$idHabitacion";
    $rs =$conexion->query($sql);

    #Aquí realmente deberías comprobar si se actualizaron filas
    #pero no sé qué API estás usando, impleméntalo según la API
    echo "Habitación actualizada";
} else {
    echo "No se postearon datos desde el cliente";
}

Con eso deberías resolver tu problema. Te recomendaría que evites el uso de funciones obsoletas y que clarifiques un poco con respecto al uso de jQuery o de Javascript. Aquí he escrito una respuesta basada en jQuery sobre todo por el tema de Ajax, que es algo un poco más complejo pero todo esto puedes hacerlo perfectamente en Javascript puro, cuando tengas algo más de experiencia.

Si hay algún problema lo dices en comentarios a esta respuesta. Espero te sirva.

12
  • Hay algunas imprecisiones en tu respuesta, $.ready() no es obsoleto, ni sustituido por ($( function() {} ), son equivalentes. La propiedad type sigue presente en la documentación, como alias de method para mantener compatibilidad con versiones anteriores de jQuery. El hook success: tampoco es obsoleto como propiedad de opciones, aunque sí como "callback" de promesa, es en ese contexto donde .success() fue remplazado por .done().
    – Triby
    el 14 abr. 2021 a las 15:54
  • 1
    Como diría Terminator .. "Viejo, no obsoleto" el 14 abr. 2021 a las 16:22
  • @Triby sí lo es desde jQuery 3 As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with "document" which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.
    – A. Cedano
    el 14 abr. 2021 a las 16:30
  • En cuanto a type admito que no es obsoleto, pero es un alias de method, su uso no se justifica a no ser que por algún motivo estés usando una versión antigua de jQuery. En estos casos es mejor usar el original que la copia.
    – A. Cedano
    el 14 abr. 2021 a las 16:38
  • @A.Cedano, cierto, omití leer ese párrafo, justo debajo de las equivalencias. Y, sin embargo, el método no aparece aún en la categoría deprecated como pasa con $.trim().
    – Triby
    el 14 abr. 2021 a las 16:39
0

Ya tienes una muy buena respuesta para ejecutar la petición AJAX con jQuery, pero no es la única opción, también puedes hacerlo con Javascript "puro" con la API fetch().

Primero algunos comentarios:

  • La etiqueta TR solo debe usarse dentro de una tabla y conteniendo solo celdas (TH o TD), cualquier otra estructura probablemente resulte en renderizados muy diferentes de acuerdo a lo que interprete cada navegador
  • Como bien te sugirió @A.Cedano en su respuesta, si vas a usar botones, sería conveniente agregar el número de habitación en el atributo value y así evitarías tener que manipular una cadena para obtenerlo

function estatusHabitacion(e) {
    let btn = e.target;
    btn.classList.toggle("rentado");
    let rentado = btn.classList.contains("rentado");

    let habitacion = btn.textContent.replace("H ", "");
    console.log(habitacion, rentado);

    // Implementación con Ajax
    fetch('Update.php', {
        method: 'post',
        data: {
            // Se debe enviar número de habitación y estado
            idHabitacion: habitacion,
            // Enviar el nuevo valor
            estatus: (rentado) ? 'Ocupado' : 'Disponible'
        }
    })
    // Cuando el servidor envía la respuesta se ejecuta esta función
    .then(resp => {
        // Verificar que se ejecutó correctamente
        if(resp.ok) {
            // Convertir respuesta en Texto y devolver promesa
            return resp.text();
        }
        console.log('Error en petición AJAX, encabezados de respuesta indican error en servidor');
    })
    // Cuando la respuesta es convertida a texto
    .then(text => {
        // Desde PHP recibes el mensaje a mostrar
        // No es lo más adecuado, pero es suficiente para este ejemplo
        alert(text);
    })
    // Manejo de errores
    .catch(e => {
        console.log('Hubo un problema con la petición Fetch:' + e.message);
    });
}

document.addEventListener("DOMContentLoaded", () => {
    let habitacion = document.querySelectorAll(".habitacion");
    habitacion.forEach((habitacion) => {
        habitacion.addEventListener("click", estatusHabitacion);
    });
});
button {
        background: #29bb89;
        width: 50px;
        height: 50px;
        margin: 6px;
    }
    
    .rentado {
        background: #f05945;
    }
<div id="habitacion" class="contendo">
        <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>
</div>

Para actualizar en base de datos, también coincido con @A.Cedano en que deberías usar consultas preparadas.

En PHP debes obtener tanto el número de habitación como el nuevo estado. Te sugiero declarar las variables con el operador de fusión NULL para garantizar que están declaradas.

<?php
include("conexion.php");
// Crear variables asignando valor por defecto si no existen en $_POST
$idHabitacion = (int) $_POST['idHabitation'] ?? 0;
$estatus = $_POST['estatus'] ?? '';

// Verificar que habitación es mayor que cero y el estatus es correcto
if($idHabitacion > 0 && ($estatus == 'Ocupado' || $estatus == 'Disponible') {
    // Actualizar estatus especificando ID de habitación
    $consulta = "UPDATE habitaciones SET estatus = '$estatus' WHERE idHabitacion = $idHabitacion";
    // Ejecutar consulta; devolverá falso en caso de error
    if($conexion->query($consulta)) {
        echo "La habitación $idHabitacion ahora tiene estado $estatus";
    } else {
        echo 'Hubo un error al actualizar habitación';
    }
} else {
    echo 'No se recibieron correctamente ID de habitación y estatus';
}
3
  • Gracias @Triby tomare en cuenta tus comentarios.
    – H-j Angel
    el 14 abr. 2021 a las 18:09
  • me sale un error al momento de dar clic a un botón <br /> <b>Parse error</b>: syntax error, unexpected '?' in <b>C:\xampp\htdocs\ProyectoHotel\Update.php</b> on line <b>5</b><br />
    – H-j Angel
    el 14 abr. 2021 a las 20:21
  • @H-jAngel, por favor edita tu pregunta para poner el código actualizado, junto con el mensaje de error, la línea que lo provoca y qué versión de PHP estás usando.
    – Triby
    el 14 abr. 2021 a las 21:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.