Tengo un trozo de codigo, que hace muestra las mesas de un restaurant. Esto funciona de maravillas, pero lo que necesito es que este div, que contiene consultas intercaladas en trozos de codigo HTML, se actualice cada cierto tiempo, de manera que muestre las mesas que se han ocupado (por ventas), sin que el usuario este actualizando manualmente la pagina.
Adjunto imagen en donde se puede ver la visualizacion de las mesas
Como se puede ver, los cuadros azules son las mesas desocupadas y los rojos las mesas que se ocuparon. Es esto lo que necesito, que me vaya mostrando en tiempo real, los cambios en las mesas, de manera que se pueda evitar el actualizar manualmente.
Otro problema que tengo es que dentro de esta pantalla, se ejecuta un modal bootstrap y cuando hice las pruebas con un setinterval o settimeout, el modal simplemente desaparece cuando hace la actualizacion automatica.
Come mencione antes, esto es solo parte de un codigo mas extenso, pero lo que describo es lo que se muestra en la imagen.
Aqui el codigo:
<div class="box-body">
<?php
foreach ($id_ub AS $ub_key){
$consulta = "SELECT id, nombre FROM ubicacion WHERE id_cl = '$id_cl' AND estado = 'S' AND id = '$ub_key'";
$resultado = $conexion->query($consulta) or die("Last error: {$conexion->error}\n");
$id_u = array();
if ($resultado->num_rows > 0){
while ($row = $resultado->fetch_array()) {
$id_u[] = $row['id'];
?>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title"><b>MESAS <?=strtoupper($row['nombre'])?></b></h3>
</div>
<div class="box-body">
<?php
foreach ($id_u AS $ub_key1){
$consulta = "SELECT id, num_mesa, tipo_venta, ubicacion, estado_pedido AS ocupada FROM mesas WHERE id_cl = '$id_cl' AND estado_gral = 'S' AND ubicacion = '$ub_key1'";
$resultado = $conexion->query($consulta);
if ($resultado->num_rows > 0){
while ($qry = $resultado->fetch_array()) {
if ($qry['ocupada'] == 'P') {?>
<div class="col-xs-2">
<div class="small-box bg-red-gradient color-palette" style="height: 5rem;">
<div class="inner" >
<?php if ($qry['tipo_venta'] == 1){ //condicional de mesa ocupada?>
<a href="pagar_ventas.php?mesa=<?=$qry["num_mesa"]?>&nom=<?=$qry["num_mesa"]?>&idub=<?=$qry["ubicacion"]?>&id=<?=$qry["id"]?>" style="color:white">
<p style="font-size: 20px; text-align: center; font-weight: bold"><?=$qry["num_mesa"]?></p>
</a>
<?php }else{ ?>
<a href="pagar_ventas_ind.php?mesa=<?=$qry["num_mesa"]?>&nom=<?=$qry["num_mesa"]?>&idub=<?=$qry["ubicacion"]?>&id=<?=$qry["id"]?>" style="color:white">
<p style="font-size: 20px; text-align: center; font-weight: bold"><?=$qry["num_mesa"]?></p>
</a>
<?php } ?>
</div>
</div>
</div>
<?php }else{ ?>
<div class="col-xs-2">
<div class="small-box bg-blue color-palette" style="height: 5rem;">
<div class="inner"><a href="#" data-toggle="modal" data-book-id3='<?=$qry["num_mesa"]?>' data-book-id='<?=$qry["id"]?>' data-book-id2='<?=$qry["ubicacion"]?>' data-target="#tipo-modal" style="color:white;">
<p style="font-size: 20px; text-align: center; font-weight: bold"><?=$qry["num_mesa"]?></p>
</div>
</a>
</div>
</div>
<?php } //fin condicional de mesa ocupada
} //fin while mesas
} //fin if mesas
} //fin foreach mesas?>
</div>
</div>
</div>
<? } //fin while ubicaciones
} //fin if ubicaciones
} //fin foreach ubicaciones?>
<div id="tipo-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SELECCIONE TIPO DE VENTA.-</h4>
</div>
<div class="edit-content"></div>
</div>
La idea es poder actualizar solo el estado de las mesas (cambio de color) de manera automatica sin afectar el funcionamiento general de esta parte, que es una de las mas criticas del sistema.
La consulta que hace el trabajo de ver los cambios en base de datos es:
$consulta = "SELECT id, num_mesa, tipo_venta, ubicacion, estado_pedido AS ocupada FROM mesas WHERE id_cl = '$id_cl' AND estado_gral = 'S' AND ubicacion = '$ub_key1'";
Agradezco como siempre cualquier ayuda que puedan brindarme u orientacion de como poder realizar este proceso.