2

Tengo un div que forma con CSS una burbuja de notificaciones tipo WhatsApp, pero necesito refrescar la página para que me aparezcan dichas notificaciones.

Quiero actualizar únicamente el div sin necesidad de recargar la página entera.

He aquí el código:

<div class="burbujanoti" id="burbuja"  href="javascript:mostrarBurbuja();" style=" margin-right:18%; top:1%; font-size:0.75em; font-weight:bold;color:white">
    <div class="numnoti" id="numburbuja"   style="font-size:10px; ">
        <%$msgPdteR%> 
    </div>
</div>

Y aquí el javascript:

if (document.getElementById('numburbuja').innerHTML == 0){
   var el = document.getElementById('burbuja');   
   el.style.display = (el.style.display == 'none') ? 'block': 'none';
}else{
   document.getElementById('burbuja');
}
4
  • Hola Gone. Bienvenido a Stack Overflow en español. Recuerda leer el recorrido de bienvenida y Cómo preguntar para aprender el funcionamiento basico del sitio y como hacer preguntas de más calidad. Para tu pregunta, has investigado llamadas asincronas? Un saludo
    – lois6b
    Commented el 18 ago. 2017 a las 7:43
  • Hola Gone. ¿Dónde generas <%$msgPdteR%>? ¿Es una página única o parte de un todo? ¿Está en la misma página que el javascript que muestras o se genera en una URL diferente? ¿Qué lenguaje del lado del servidor usas? ¿Usas jQuery? Commented el 18 ago. 2017 a las 9:43
  • Buenas, primero de todo, gracias a todos. <%$msgPdteR%> Es una variable que se genera en un lenguaje desarrollado por un programador que conozco, funciona correctamente, es una variable que recoge el resultado de una consulta sql, en la app web uso js, ajax y creo que jquery también tiene alguna librería, un saludo y gracias!
    – J. Gone
    Commented el 18 ago. 2017 a las 9:52
  • Lo que necesitas es AJAX para actualizar los datos de la base de datos representadas en ese DIV sin necesidad de refrescar la página. Sea un whatsapp, chat, notificaciones, etc, son datos o información guardada en una base de datos que se refrescan mediante AJAX para tener esas notificaciones o avisos sin tener que refrescar la página. Echa un vistazo al canal de youtube "pildorasinformaticas" que es un tío que explica muy bien y tiene una lista de reproduccion de Javascript (ajax es javascrip) y dentro del mismo hay 4-5 videos de 20min que te lo explica perfecto.
    – ret
    Commented el 18 ago. 2017 a las 10:35

1 respuesta 1

4

Una solución a tu problema es usar XHR / XMLHttpRequest para realizar una consulta asíncrona (sin recargar la página) tras la cual podrás actualizar el contenido de la página sin tener que recargarla:

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la pagina completa. Una pagina web puede actualizar sólo una parte de la pagina sin interrumpir lo que el usuario esta haciendo. XMLHttpRequest es ampliamente usado en la programación AJAX.

A continuación te muestro un ejemplo con comentarios de cómo realizar la tarea.

Es importante que cambies tu_url_con_actualizaciones por la URL donde se pueda obtener el HTML que debe mostrarse dentro de la burbuja.

/* Indicador de permiso para actualizar (burbuja mostrada) o no */
var actualizando = true;

function mostrarBurbuja() {
  var el = document.getElementById('numburbuja');
  el.style.display = (el.style.display == 'none') ? 'block': 'none';
  actualizando = (el.style.display == 'block');
}

/* Función que solicita los datos en cada intervalo */
function solicitar_datos() {
  /* Actualizamos el globo sólo si está siendo mostrado */
  if (actualizando == true) {
    /* Abrimos una nueva conexión y enviamos la petición para obtener las actualizaciones */
    xhr.open('GET', 'tu_url_con_actualizaciones');
    xhr.send(null);
  }
}

/* Nuestro XHR */
var xhr = new XMLHttpRequest();

/* Un contador de actualizaciones, para depuración */
var contador = 0;

/* Cuando el documento cargue inicializamos todo */
document.addEventListener("DOMContentLoaded", function(event) {
  /* Obtenemos esta valor únicamente una vez y luego lo reutilizamos */
  var div = document.getElementById('numburbuja');
  /* Preparamos la función que será llamada cada vez que se actualice el estado del XHR */
  xhr.onreadystatechange = function () {
    /* readyState = 4 indica que ha terminado la carga del documento */
    if (xhr.readyState === 4) {
      /* Un código HTTP 200 indica que todo fue bien */
      if (xhr.status === 200) {
        /* Actualizamos el contenido de la burbuja */
        div.innerHTML = ++contador + " - " + xhr.responseText;
      } else {
        /* Tratamos el error (mostrando el error dentro de la burbuja en este caso) */
        div.innerHTML = ++contador + ' - Error HTTP: ' + xhr.status;
      }
    }
  };
  /* Solicitamos los datos (si está activado) y planificamos los intentos cada 2 segundos */
  solicitar_datos();
  setInterval('solicitar_datos()', 2000);
});
<div class="burbujanoti" id="burbuja" onclick="mostrarBurbuja()">
 (antes) [
 <div class="numnoti" id="numburbuja" style="color: blue; border: red solid 1px;"></div>
 ] (despues)
</div>

Por último, te recomendaría usar jQuery para facilitarte la tarea de acceder y modificar el DOM, así como facilitarte el trabajo con XHR / XMLHttpRequest usando jQuery.ajax().

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.