0

Quiero llegar a hacer un div que recargue solo cuando halla una modificación en la base de datos actualmente tengo esto así, si me pueden ayudar se los agradecería es para un sistema de turnos que estoy haciendo

<?php

$result = $mysqli->query("SELECT * FROM  `turnos` ORDER by `turno` desc limit 1" ); 
$row = $result->fetch_row(); 

  echo '<script type="text/javascript">
  swal({ title: "siguiente turno : '.$row[0].'", 
  text: "Se envio correctamente", 
  type: "success",
  showConfirmButton: false,
  timer: 2000
});
 </script>'; 

introducir la descripción de la imagen aquí

Este es el ajax:

 <script>
    setInterval(function() {
$('#turnos').load('./ajax/turnos.php');`// Selector de la div y el fichero a refrescar

}, 1000); // Temporizador que ejecuta el refresco cada 1 segundos
</script>

div

<div id="turnos"></div>
2
  • Podrias guardar el ultimo turno desplegado y mandarlo por ajax para compararlo con el resultado del query, si son iguales no haces nada, pero si son diferentes despliegas el swal.
    – alanfcm
    Commented el 27 jul. 2018 a las 16:04
  • apenas estoy aprendiendo ajax como se podria guardar el numero por medio de ajax?
    – user95232
    Commented el 27 jul. 2018 a las 16:09

2 respuestas 2

7

Lo que estás haciendo es básicamente correcto. Una base de datos como MySQL no es "reactiva" como para gatillar alertas cuando ocurren cambios. Lo que tú estás haciendo es una especie de long-polling.

Sin embargo,, creo que lo estás enfocando mal. El backend no tiene por qué imprimir un script. De hecho me parece muy mala idea.

El backend sólo debiera responderte con un objeto de la forma

{turno: 5}

Y en el front, tú mismo llamar a SweetAlert si es que la respuesta del backend es distinta a la anterior (que guardas en una variable);

En otras palabras, en tu backend:

<?php

$result = $mysqli->query("SELECT * FROM `turnos` ORDER by `turno` desc limit 1" ); 
$row = $result->fetch_row(); 

echo json_encode(['turno'=>$row[0]]);

Y en el frontend:

var turno_actual=0;

function desplegarAlerta() {
   // despliego la alerta desde el front
   swal({
    title: "siguiente turno : " + turno_actual,
    text: "Se envio correctamente",
    icon: "success",
    button: true
  });
}

function refrescaTurno() {

   $.ajax({
     url: "./ajax/turnos.php",
     dataType:'json' // parseo la respuesta como objeto
   }).then(function(response) {
      // sólo lo ejecutas si el turno cambió
      if(response.turno != turno_actual) {
         turno_actual=response.turno;
         desplegarAlerta();
      }
      window.setTimeout(refrescaTurno,2000);
   });

}

refrescaTurno();

Nótese que me tomé de la idea de Ivanrangel para gatillar el nuevo llamado una vez que el backend ha respondido. Si pones un intervalo arbitrario y el backend demora más que éste, vas a encolar llamados.

Te dejo un ejemplo en donde, a falta de llamadas ajax puse una función que me genera un número aleatorio, el cual determina si se incrementó el turno o si se ha mantenido igual. Si el nuevo turno es igual al existente, escribo en la consola que no hay cambios.

PD: no estoy usando para nada el div que tú estabas llenando. Ignoro si tiene alguna relevancia.

PD2: tú estabas definiendo el SweetAlert para autocerrarse luego de 2 segundos. Yo le quité ese parámetro porque en tu ejemplo no tenía sentido (polling cada 1 segundo, nunca se cumplían los 2 segundos para autocerrarse)

var last_turno = 1,
  intervalo;
  
function getTurno() {
  return new Promise(function(resolve,reject) {
      var random=parseInt(7*Math.random(),10);
      if(random>3) {
        window.setTimeout(function() {
          resolve({turno:last_turno+1});
        },500);
      } else {
         window.setTimeout(function() {
          resolve({turno:last_turno});
        },500);
      }
  });
}

function displayTurno(turno) {
  console.log('El nuevo turno es '+last_turno);
  swal({
    title: "siguiente turno : " + turno,
    text: "Se envio correctamente",
    icon: "success",
    button: true
  });
}

function comenzarIntervalo() {
  displayTurno(last_turno);
  intervalo = setInterval(function() {
    getTurno().then(function(response) {
      if(response.turno !== last_turno) {
        last_turno=response.turno;
        displayTurno(last_turno);  
      } else {
        console.log('No ha cambiado el turno');
      }
    });
    
  }, 5000);

}

jQuery(document).ready(function() {
  jQuery('#iniciar').on('click', function() {
    jQuery('#terminar').removeAttr('disabled');
    jQuery('#iniciar').attr('disabled', 'disabled');
    comenzarIntervalo();
  });
  jQuery('#terminar').on('click', function() {
    jQuery('#iniciar').removeAttr('disabled');
    jQuery('#terminar').attr('disabled', 'disabled');
    clearInterval(intervalo);
  });
});
.swal-icon {
float:left;
margin-left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<div id="turnos"></div>

<input type="button" value="terminar el refresco" id="terminar" disabled="disabled">
<input type="button" value="empezar a refrescar" id="iniciar">

2
  • Hola! muchas gracias por la explicacion me ayudo mucho , pero al intentar hacerlo como lo me lo propones no me manda a la alerta no se que estare haciendo mal
    – user95232
    Commented el 30 jul. 2018 a las 22:25
  • Revisa qué te está respondiendo el backend (console.log al response de ajax)
    – ffflabs
    Commented el 30 jul. 2018 a las 23:36
0

Lo que podrias hacer es que cargue cada cierto tiempo te dejo un ejemplo de como podrías hacerlo.

<!DOCTYPE html>
<html lang="es">
<head>
<title>ajaxreload</title>
<style>
</style>
</head>
<body>
<div id="turnos"></div>
</body>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
function sendRequest(){
  $.ajax({
    url: "./ajax/turnos.php",
    success:
      function(result){ 
/* si es success mostramos resultados */
       $('#turnos').text(result);
    },
    complete: function() { 
/* solo una vez que la petición se completa (success o no success) 
   pedimos una nueva petición en 3 segundos */
       setTimeout(function(){
         sendRequest();
       }, 3000); /*Estos son 3 segundos*/
      }
    });
  };

/* primera petición que echa a andar la maquinaria */
$(function() {
    sendRequest();
});

</script>
</html>

Tu Respuesta

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