Tengo un div que recarga datos de otra página. El código se ve así:
var auto_refresh = setInterval( function() { $('#mydiv').load('load.php'); }, 1000); // refresh every 1000 milliseconds <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> <div id="mydiv"> <?php echo 'loading...';?> </div>Esto funciona maravillosamente para actualizar mis datos. Sin embargo, realmente no quiero que actualice el div cada 1000 milisegundos, quiero que verifique si algo ha cambiado y, de ser así, actualice el div.
Por ejemplo:
$current_vericode = 'kdsjfkdfj'; $sql = "SELECT\n". " vericode\n". "FROM\n". " users\n". "WHERE\n". " users.id = 3"; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $new_vericode = $row["vericode"]; } } if ($current_vericode == $new_vericode) { //don't refresh the div } else { //refresh it and... //$current_vericode = $new_vericode }De esta manera, todo lo que sucede es que verifica mysql para ver si el campo especificado ha cambiado. Si no lo ha hecho, entonces no hace nada. Si es así, actualizará el div y actualizará el código.
Entiendo que el efecto será el mismo que actualizar constantemente, pero realmente quiero agregar formularios y cosas que podría hacer sin actualizar hasta que el campo mysql haya cambiado.
Entonces, cada 1000 milisegundos, verifique mysql y compárelo con el valor actual. Si son iguales, finaliza / sale. Si han cambiado, actualice y guarde el nuevo valor como actual.
¿Algunas ideas?
Puede hacer esto de dos maneras:
La primera llamada verifica si es hora de volver a cargar utilizando una marca de tiempo o un contador de versiones con la última versión buena.
var auto_refresh = setInterval( function() { $.post('check-load.php').done(function(reply) { if (reply.timestamp < $('#mydiv').attr('timestamp')) { return; } $('#mydiv').load('load.php').attr({ timestamp: reply.timestamp }); }); }, 1000); //Aquí, el HTML se genera en cada llamada, pero solo se carga realmente si es necesario. Sin embargo, se descargará cada vez.
function() { $.post('check-load.php').done(function(reply) { if (reply.timestamp < $('#mydiv').attr('timestamp')) { return; } $('#mydiv').html(reply.html).attr({ timestamp: reply.timestamp }); }); }, 1000); //En el segundo caso, envía un JSON que contiene también el HTML de la página generada.
Si la verificación de carga es fácil y la generación de HTML es lenta, entonces debería optar por el primer método. Si el tráfico es un problema, el primer método es mejor.
// comprobar-cargar (con HTML)
El código anterior hace que MySQL genere una marca de tiempo y vuelva a cargar el DIV cuando cambie la marca de tiempo. El siguiente código es más cercano al tuyo:
$current_vericode = 'kdsjfkdfj'; $sql = 'SELECT vericode FROM users WHERE users.id = :id'; $rs = $conn->prepare($sql); $rs->execute([ ':id' => 3 ]); // or Array(':id' => 3) with older PHPs ... if ($current_vericode == $new_vericode) { $reply = [ 'refresh' => 'no' ]; } else { $reply = [ 'refresh' => 'yes', 'html' => '<p>HELLO WORLD</p>' ]; } Header('Content-Type: application/json;charset=utf-8'); die(json_encode($reply)); Pero ahora el código jQuery tiene que cambiar ligeramente para leer .refresh :
$.post('check-load.php').done(function(reply) { if (reply.reload === 'yes') { $('#mydiv').html(reply.html); } });Arriba, enviamos todo el kit y kaboodle para cargar en el DIV. Es una pérdida de ancho de banda y obliga al cliente a cargar siempre el mismo HTML a menos que envíe algún código o analice el User-Agent para diferenciar a los clientes.
¿Qué se va a mostrar en ese DIV? Puede usar Handlebars para completar una plantilla. Digamos que es solo la hora, la fecha y el nuevo vericode:
if ($current_vericode == $new_vericode) { $reply = [ 'refresh' => 'no' ]; } else { $reply = [ 'refresh' => 'yes', 'time' => date('H:i:s'), 'auth' => $vericode ]; }y en jQuery (Handlebars sería mucho mejor, incluso si es excesivo para un poco de DIV):
$('#mydiv').empty().append( $('<p>').text(reply.time) ).append( $('<p>').text('New authcode: ' + reply.vericode) );Esto es lo que terminé haciendo:
$i = 1; var auto_refresh = setInterval(function() { $.get("data.php?user_id=3", function(data) { //condition of data if (data != $i) { $('#gantt').load('dash_includes/dash_display_gantt.php').fadeIn("slow"); $('#all_bookings_div').load('dash_includes/dash_display_all_bookings.php').fadeIn("slow"); $('#secondary-sidebar').load('dash_includes/secondary_sidebar.php').fadeIn("slow"); $i = data; } }); }, 5000);entonces en data.php hace eco de una fecha y hora. Cada vez que necesito actualizar los divs, actualizo la fecha y hora. Cada 5000 milisegundos, verificará si la fecha y hora ha cambiado y, de ser así, actualizará los divs y guardará esa fecha y hora como $i. Si la fecha y hora no ha cambiado o es anterior a $i, no hará nada.
Gracias por toda tu ayuda.