Refresh reload contenido DIV usando jQuery [Completo]

Refresh reload contenido DIV. El método jQuery load solicita páginas de servidor y actualiza el selector o etiquetas del HTML con el contenido de la página. Por lo tanto, en este artículo, vamos a cargar automáticamente y actualizar un DIV con un intervalo periódico con varios ejemplos completos.

Tabla de contenidos

¿Cómo refrescar un DIV con jQuery?

Primera solución. – Para actualizar el div de tu código HTML podemos usar la función setInterval() de JavaScript que es perfecto para lograr nuestro objetivo ya que la misma llama a una función o evalúa una expresión en un intervalo de tiempo específico expresado en mili segundos. Veamos un ejemplo completo:

<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="feedback-bg-info"><textarea></textarea></div>
<script>
$(document).ready(function() {
var refreshId = setInterval( function(){
$('#feedback-bg-info').load('chat.php');//actualizas el div automaticamente
}, 2000 );
});
</script>
</body>

</html>

Explicando la expresión:

$('#feedback-bg-info').load('chat.php');

Con esta declaración solo estaríamos actualizando el div de tu página, ya que llamas al id con el cual está definido. Por lo tanto, en la Función «load» se ingresa el enlace de tu página que se refrescaría.

Segunda Solución: Actualizar DIV automáticamente

Debe realizar una consulta Ajax para obtener datos del servidor y rellenar el DIV. Sin embargo, esta declaración, funciona perfecto.

$("#mydiv").load(location.href + " #mydiv");

Nota: Siempre tome nota del espacio justo antes del segundo signo #, de lo contrario el código anterior devolverá toda la página anidada dentro de su DIV previsto. Siempre ponga espacio.

$("#myDiv").load(location.href+" #myDiv>*","");

Detalles del script

Cuando se ejecuta este método, recupera el contenido de location.href, pero, a continuación, jQuery analiza el documento devuelto para buscar el elemento con divId. Este elemento, junto con su contenido, se inserta en el elemento con un identificador (divId) de result y se descarta el resto del documento recuperado.

$("#divId").load(location.href + " #divId>*", "");

Si bien no ha proporcionado suficiente información para indicar realmente DE DÓNDE debe extraer datos, debe extraerlo de algún lugar. Puede especificar la dirección URL en carga, así como definir parámetros de datos o una función de devolución de llamada.

$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load('YourUrl');
});

Usando Función jQuery

Si bien en ejemplos anteriores hemos dado solución al detalle, sin embargo, también podemos usar una funciona para lograr el mismo objetico.

$(document).ready(function() {
var pageRefresh = 5000; //5 s
setInterval(function() {
refresh();
}, pageRefresh);
});

// Functions

function refresh() {
$('#div1').load(location.href + " #div1");
$('#div2').load(location.href + " #div2");
}

B) Carga y actualización automáticas de jQuery DIV

Carga automática de jQuery

Se requieren muy pocas líneas de código para la carga automática de jQuery. Veamos el ejemplo completo.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$("#screen").load('info.php')
}, 2000);
});
</script>

El archivo PHP info.php se solicita a través de jQuery Ajax usando el método de carga.

Este archivo contiene una matriz de códigos de color HTML. Uno de esos colores se elige usando la matriz rand de PHP para cambiar los fondos de los banners y se carga en un DIV especificado. El código PHP es el siguiente:

<?php
$bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");
$bg = array_rand($bg_array,1);
?>
<div class="banner" style="background-color:<?php echo $bg_array[$bg];?>;" >
<div class="txt-title">jQuery DIV Auto Load Refresh</div>
<div class="txt-subtitle">This Banner auto loads and refreshes every 2 seconds.</div>
</div>

Este evento de carga de jQuery ocurre cada 2 segundos para actualizar el banner periódicamente. En lugar de usar datos de matriz estática, podemos conectar DB para cargar div con datos dinámicos.

Conclusión: Refresh reload contenido DIV

Este tutorial de carga automática de jQuery ayudará a actualizar el contenido con los últimos feeds, a cargar banners publicitarios aleatorios, entre otras utilidades.

Puede personalizar según su necesidad y como han podido apreciar su implementación es muy sencilla

Espero que esto pueda ayudar a alguien a entender la actualización de DIV en HTML5.