0

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:

Cargando-modal

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.

3 respuestas 3

1

Tambien podrias hacelo pero no tan personalizado, es decir:

$(document).ajaxStart(function(){ 
       mostar_mensage(); 
});
$(document).ajaxComplete(function(){ 
       ocultar_mensage(); 
});

De esta manera, cada vez que haya peticion ajax se mostrará el mensaje,y al finalizar se ocultar

1
  • Interesante. Sabes, si puedes tomar el code-snippet que he suministrado en la pregunta y editarlo con tu sugerencia (para que cumpla con lo que espero, es decir, mostrando el mensaje de "Obteniendo token..." y demás), aceptaría tu respuesta. Aprecio la ayuda, por supuesto +1. Commented el 31 dic. 2018 a las 22:17
0

Queire un funcion para logro en la llama AJAX. Por ejemplo

[...]
}),
  error: function(data) {
     alert("Error al obtener el token (proveedor - " + objPE[1].Valor + "): " + data.status);
    },
   success: function(data) {
           Mostrar_mensaje("Su codigo personal es " + data);
// las otras cosas que quiere hacer cuando sucede...
}
[...]

Como asi.

5
  • Lo que busco es mostrar el div antes de hacer el llamado ajax, después del llamado (para ver si la llamada tiene datos o hubo un error). perdona, pero te pregunto: ¿hablas inglés? Commented el 31 dic. 2018 a las 15:07
  • Si, creo que te diste cuenta que español es lengua extranjera para mi?
    – Duston
    Commented el 31 dic. 2018 a las 15:17
  • English: Correct, your profile has a description in english and you have some errors expressing in spanish like: Queire is incorrect; it should be Quiere o Quieres. I don't know if you're using Google Translate... Spanish: Así es, tienes una descripción en inglés (en tu perfil) y tienes algunos errores de expresión (no sé si estás usando Google Translate)... Commented el 31 dic. 2018 a las 15:22
  • Nopo, no uso Google Translate, es que no peudo telcar :).
    – Duston
    Commented el 31 dic. 2018 a las 15:38
  • Duston: oh, ok then :) Ahora comprendo mejor lo que intentas decir en tu respuesta, pero me temo que no soluciona mi problema. Intentaré crear un ejemplo "mvce", para explicar mejor mi problema. he editado mi pregunta. Si tienes alguna sugerencia o algo que añadir, no dudes en comentar. Saludos. Commented el 31 dic. 2018 a las 16:48
0

Lo que pasa que tu función ocultar_mensaje lo pones al final de tu función y debería ser dentro de tu ajax al ocurrir un error o al finalizar correctamente ya que si lo pones fuera de tu petición ajax la función inmediatamente se vuelve llamar sin esperar que termine de ejecutarse tu peticion, por lo que se debe ejecutar al recibir una respuesta por parte de tu petición. En efecto tu problema es por las llamadas asincronas

aquí un ejemplo:

success: function(data) {

    // Mostrar mensaje indicando el final de la función.
    Mostrar_mensaje("Ha finalizado la ejecución de este programa correctamente.");

    // Ocultar mensaje "después de 2 segundos".
    setTimeout(function() {
      ocultar_mensaje();
    }, 2000);


},
error: function(err) {

    // Mostrar mensaje indicando el final de la función.
    Mostrar_mensaje("Ha finalizado la ejecución de este programa con un error.");

    // Ocultar mensaje "después de 2 segundos".
    setTimeout(function() {
      ocultar_mensaje();
    }, 2000);

},
1
  • Comprendo. Removiendo el llamado a "ocultar_mensaje", ¿cómo hago para que se muestre el mensaje "Obteniendo token..."?, ahora, si tomas el code-snippet de mi pregunta y lo modificas, me resultaría mas claro (ya que, las respuestas expuestas aún no resuelven mi problema inicial). Commented el 31 dic. 2018 a las 19:46

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.