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()
.
<%$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?