Transfondo:
Tengo una aplicación en VB.NET que realiza peticiones a algunos servicios web. Estos servicios web están disponibles para ser consumidos vía AJAX.
Mientras la petición está siendo realizada, me gustaría mostrar un div
que muestre un mensaje al usuario indicando que la aplicación está procesando la información.
Ejemplo: Captura de pantalla con el mensaje a mostrar:
La función "Mostrar_mensaje" cambia el valor de la propiedad display
de none
a block
del div que contiene el mensaje a mostrar:
function Mostrar_mensaje (var texto) {
// Div "InactivaVentanaMensajePersonalizado" = fondo negro. opacity: 0.8;
// Div "CuerpoMensaje" = Div contenedor del texto "Cargando..." y el mensaje guardado en el parámetro "texto".
// Div "TextoMensaje" = texto personalizado a mostrar.
document.getElementById('InactivaVentanaMensajePersonalizado').style.display = 'block';
document.getElementById('CuerpoMensaje').style.display = 'block';
document.getElementById('TextoMensaje').innerHTML = texto;
}
Este es un ejemplo sencillo de una función que utilizo para consumir un servicio web. Allí se puede notar que invoco a la función "Mostrar_mensaje
" para mostrar el div con un mensaje personalizado:
/** Objeto general que contiene la respuesta de los llamados a las APIs. */
var ResuDataObje = {
dataResult: '',
dataError: ''
};
function Obtener_Token() {
Mostrar_mensaje('Obteniendo token...');
// Al llamar a la función "Mostrar_mensaje" debería mostrarse en pantalla
// el div como se muestra en el ejemplo, pero no es visible sino hasta
// colocar un punto de interrupción en la siguiente línea:
var linea_ejemplo = "prueba";
// Es aquí donde pongo el punto de interrupción
// para comprobar si se llamó correctamente a la función "Mostrar_mensaje".
try {
var JQDataSend = $.ajax({
type: "POST",
url: "http://url_servicio/obtener_token",
headers: {
"Accept": "application / json",
'Content-Type': 'application/json'
},
dataType: 'json',
async: false,
data: JSON.stringify({
username: "username",
password: "password"
}),
error: function(data) {
alert("Error al obtener el token (proveedor - " + objPE[1].Valor + "): " + data.status);
}
});
ResuDataObje.dataResult = JSON.parse(JQDataSend.responseText);
// Determinar si asigna el token a la variable global (o mostrar un mensaje en caso de error).
if (ResuDataObje.dataError.error) {
mostrar_alerta('No se pudo generar el token de acceso:\n' + ResuDataObje.dataError.descript);
API_TOKEN_OBJ = undefined;
} else {
// Continuación del flujo - asignar token y llamar a la función que obtiene el CUFE.
API_TOKEN_OBJ = ResuDataObje.dataResult;
// Aquí hago otro llamado a otra función pasandole el TOKEN obtenido.
}
} catch (err) {
alert('Error en la función (Obtener_Token) - ver la consola para mas detalles.');
console.log(err);
}
}
El código anterior se encuentra en un WebForm enlazado a un Site.Master
. Esta página maestra tiene las siguentes referencias a JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Problema:
Al ejecutar este código, el llamado a "Mostrar_mensaje
" se realiza, pero en pantalla no se muestra el div con el mensaje personalizado. Solo hasta colocar un punto de interrupción es que veo que el div sí se está mostrando.
He usado setTimeout
para retrasar el llamado al servicio web/API y mostrar el mensaje, pero esto nunca pasa.
¿Qué puedo hacer para mostrar correctamente el div con el mensaje personalizado antes, durante y después del llamado al servicio/API?1
Creo que esto es un problema relacionado con las llamadas asíncronas, pero, realmente no conozco mucho al respecto.
Este es un ejemplo donde el primer mensaje que debería mostrarse sería "Obtener token", pero en realidad, solo se muestra el mensaje al finalizar la función:
Lo que esperaría obtener con este código es:
- Ver el mensaje "Obteniendo token...".
- Si hay algún error "mostrar el mensaje de error".
- Al finalizare mostrar el mensaje "Ha finalizado la ejecución de este programa.".
- Después de dos segundos, cerrar el mensaje.
$(document).ready(function() {
Obtener_Token();
});
/** Objeto general que contiene la respuesta de los llamados a las APIs. */
var ResuDataObje = {
dataResult: '',
dataError: ''
};
// Mostrar mensaje personalizado.
function Mostrar_mensaje(texto) {
// Div "InactivaVentanaMensajePersonalizado" = fondo negro. opacity: 0.8;
// Div "CuerpoMensaje" = Div contenedor del texto "Cargando..." y el mensaje guardado en el parámetro "texto".
// Div "TextoMensaje" = texto personalizado a mostrar.
document.getElementById('InactivaVentanaMensajePersonalizado').style.display = 'block';
document.getElementById('CuerpoMensaje').style.display = 'block';
document.getElementById('TextoMensaje').innerHTML = texto;
}
// Ocultar el mensaje "visible al llamar a la función Mostrar_mensaje".
function ocultar_mensaje() {
document.getElementById('InactivaVentanaMensajePersonalizado').style.display = 'none';
document.getElementById('CuerpoMensaje').style.display = 'none';
}
// Llamar a la API "Obtener token".
function Obtener_Token() {
Mostrar_mensaje('Obteniendo token...');
// Al llamar a la función "Mostrar_mensaje" debería mostrarse en pantalla
// el div como se muestra en el ejemplo, pero no es visible sino hasta
// colocar un punto de interrupción en la siguiente línea:
var linea_ejemplo = "prueba";
// Es aquí donde pongo el punto de interrupción
// para comprobar si se llamó correctamente a la función "Mostrar_mensaje".
try {
var JQDataSend = $.ajax({
url: "http://rss2json.com/api.json?callback=showFeed&rss_url=http%3A%2F%2Fmix.chimpfeedr.com%2F36116-Insurance-News",
type: "GET",
dataType: 'jsonp',
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
var feedlength = data.items.length;
var finalHTML = "";
var HTML_DIV = document.getElementById('divAllNews');
// Validar que haya encontrado el div.
if (HTML_DIV != null && HTML_DIV != undefined) {
// Validar que la consulta traiga datos.
if (feedlength != null && feedlength > 0) {
for (var i = 0; i < feedlength; i++) {
finalHTML += "<div>" +
" <p>" + "<a href='" + data.items[i].link + "'>" + data.items[i].title + "</a>" + "</p>" +
" <p>" + "Date: " + formatDate(data.items[i].pubDate) + "</p>" +
"</div>";
}
}
// Colocar los datos.
HTML_DIV.innerHTML = (finalHTML != "") ? finalHTML : "No results";
}
},
error: function(err) {
alert('An error occurred.');
Mostrar_mensaje("Ha ocurrido un error.");
}
});;
//ResuDataObje.dataResult = JSON.parse(JQDataSend.responseText);
// Determinar si asigna el token a la variable global (o mostrar un mensaje en caso de error).
if (ResuDataObje.dataError.error) {
Mostrar_mensaje('No se pudo generar el token de acceso:<br/>' + ResuDataObje.dataError.descript);
API_TOKEN_OBJ = undefined;
} else {
// Continuación del flujo - asignar token y llamar a la función que obtiene el CUFE.
API_TOKEN_OBJ = ResuDataObje.dataResult;
// Aquí hago otro llamado a otra función pasandole el TOKEN obtenido.
}
} catch (err) {
alert('Error en la función (Obtener_Token) - ver la consola para mas detalles.');
console.log(err);
}
// Mostrar mensaje indicando el final de la función.
Mostrar_mensaje("Ha finalizado la ejecución de este programa.");
// Ocultar mensaje "después de 2 segundos".
setTimeout(function() {
ocultar_mensaje();
}, 2000);
}
// Format date:
function formatDate(myElement) {
var date = new Date(myElement);
var months = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var string = months[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear() + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes());
return string;
}
// Add zero. Source: http://www.w3schools.com/jsref/jsref_gethours.asp
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
#InactivaVentana:hover {
cursor: no-drop;
}
#InactivaVentanaMensajePersonalizado {
position: fixed;
z-index: 100;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: black;
border: 1px solid rgb(250, 250, 225);
display: none;
opacity: 0.8;
filter: alpha(opacity=50);
z-index: 9999999999;
}
#InactivaVentanaBloqueoPantalla {
position: fixed;
z-index: 100;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: black;
border: 1px solid rgb(250, 250, 225);
display: none;
opacity: 0.8;
filter: alpha(opacity=50);
z-index: 9999999999;
}
#CuerpoMensaje {
width: 400px;
min-height: 60px;
border: 1px solid rgb(220, 220, 220);
position: fixed;
z-index: 10000;
border-radius: 5px;
left: 50%;
margin-left: -200px;
top: 45%;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 99999999999;
}
#Encabezado_mensaje {
width: 99%;
background-color: steelblue;
height: 30px;
float: left;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
float: left;
color: #FFF;
font-size: 14px;
font-weight: bold;
text-shadow: 2px 0px 2px #02455E;
border: 2px outset #0A91AE;
text-transform: uppercase;
box-shadow: -7px -7px 20px #02455E inset;
background-image: linear-gradient(#0A91AE, #02455E);
background-color: #0E678C;
}
#Encabezado_mensaje>p {
margin: 5px;
padding: 0px;
color: white;
font-weight: 700;
}
#Contenedor_Boton {
position: absolute;
width: 100%;
height: 24px;
bottom: 0px;
text-align: center;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
left: 0px;
}
#Contenedor_Contenido {
width: 100%;
height: auto;
bottom: 0px;
text-align: center;
float: left;
margin-bottom: 30px;
}
#TextoMensaje {
padding: 5px;
margin: 0px;
color: black;
}
#Cuerpo {
width: 100%;
background-color: rgb(245, 245, 245);
min-height: 40px;
float: left;
height: 100%;
}
#URLReDirec {
display: none;
}
#URLControl {
display: none;
}
#btn_Si {
width: 100px;
height: 24px;
position: absolute;
}
#btn_No {
width: 100px;
height: 24px;
position: absolute;
}
#Opcion {
display: none;
}
#POSBAC {
display: none;
}
#URLReDirecbtn1 {
display: none;
}
#URLReDirecbtn2 {
display: none;
}
#URLControlbtn1 {
display: none;
}
#URLControlbtn2 {
display: none;
}
#Contenedor_Cargando {
display: none;
position: fixed;
z-index: 99999999999999999;
text-align: center;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
left: 0px;
width: 250px;
height: 250px;
top: 50%;
left: 50%;
margin-top: -185px;
margin-left: -155px;
}
.ImgCargando {
display: none;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<div id="InactivaVentanaMensajePersonalizado">
</div>
<div id="CuerpoMensaje">
<div id="Encabezado_mensaje">
<p id="Titulo_mensaje">CARGANDO...</p>
</div>
<div style="" id="Cuerpo">
<div id="Contenedor_Contenido">
<p id="TextoMensaje">
</p>
</div>
<div id="Contenedor_Boton">
<p id="URLReDirecbtn1"></p>
<p id="URLControlbtn1"></p>
<p id="Opcion"></p>
<p id="URLReDirecbtn2"></p>
<p id="URLControlbtn2"></p>
</div>
</div>
</div>
<div id="divAllNews"><i>Loading news...</i></div>
1 Después de llamar a la función "Obtener_Token();
" invoco a otra función y allí también me gustaría invocar la función "Mostrar_mensaje(texto);
" para indicarle al usuario la secuencia de acciones que está realizando la aplicación.