0

Estoy llamando una API desde JSON de esta forma:

$(document).ready(function() {
    $('#btn-saldo').on('click', function() {
        if (CONDICIÓN)
        {
                $.ajax({
                url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
                type: 'GET',
                datatype: 'JSON',
            })
            .done(function(responseTwo) {
                var plata = responseTwo.saldoTarjeta;
                var fechaPlata = responseTwo.fechaSaldo;
                $( "#saldo" ).empty();
                $('#saldo').append(
                    "<div class='nav-saldo'>Saldo:</div>"+
                    "<div class='header-saldo'>" + plata + "</div>"+
                    "<div class='nav-saldo '>Saldo a la fecha: </div>"+
                    "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
            })
            .fail(function() {
              $( "#saldo" ).empty();
              $('#saldo').append(
              "<div class='nav-saldo'>Error</div>"+
              "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
            })
        }
        else
        {
            $( "#saldo" ).empty();
            $('#saldo').append(
            "<div class='nav-saldo'>Saldo:</div>"+
            "<div class='header-saldo'>" + tarjetaVacia + "</div>");
        }

    });

Resulta que para .done se demora como 5 segundos en hacer el llamado a la API y mostrar el resultado, por lo que me gustaría hacer una especie de onLoad, que muestre un Cargando, pero sé que no se pueden hacer onLoad sobre un <div>.

¿Qué solución me recomiendan?

2 respuestas 2

0

Podrías colocar dentro del if el siguiente código:

$('#id_div').html('<FONT COLOR="#000000">Cargando... </FONT><img src="imagen_simula_carga.gif"/>');

quedaría así:

if (CONDICIÓN)
{
    $('#id_div').html('<FONT COLOR="#000000">Cargando... </FONT><img src="imagen_simula_carga.gif"/>'); //agregas un mensaje y una imagen animada que se vea que esta cargando
    $.ajax({
        url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
        type: 'GET',
        datatype: 'JSON',
    })
    .done(function(responseTwo) {
        var plata = responseTwo.saldoTarjeta;
        var fechaPlata = responseTwo.fechaSaldo;
        $( "#saldo" ).empty();
        $('#saldo').append(
            "<div class='nav-saldo'>Saldo:</div>"+
            "<div class='header-saldo'>" + plata + "</div>"+
            "<div class='nav-saldo '>Saldo a la fecha: </div>"+
            "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
        $('#id_div').html(''); //Se elimina lo que se estaba mostrando
    })
    .fail(function() {
      $( "#saldo" ).empty();
      $('#saldo').append(
      "<div class='nav-saldo'>Error</div>"+
      "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
    })
}
0

Puedes tener un div que contenga la imagen y que estaría oculto por defecto por ejemplo:

<div id="cargando">
    <img style="width:100%" src="https://musicti.com/assets/images/upload-bar.gif" style="display: none;"/>
</div>

Vía jQuery lo muestras antes de iniciar la petición Ajax.

Lo puedes ocultar después del done.

// $(document).ready(function() { Deprecated 
$(function() 
{

    $('#btn-saldo').on('click', function() 
    {
        if (CONDICIÓN)
        {
          //Mostrar imagen cargando...
          $('#cargando').show(); 

            $.ajax({
            url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
            type: 'GET',
            datatype: 'JSON',
        })
            .done(function(responseTwo) 
             {
               //Ocultar cuando se haya completado
               $('#cargando').hide(); 
               var plata = responseTwo.saldoTarjeta;
               var fechaPlata = responseTwo.fechaSaldo;
               $( "#saldo" ).empty();
               $('#saldo').append(
                "<div class='nav-saldo'>Saldo:</div>"+
                "<div class='header-saldo'>" + plata + "</div>"+
                "<div class='nav-saldo '>Saldo a la fecha: </div>"+
                "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
               })
            .fail(function() 
             {
               $( "#saldo" ).empty();
               $('#saldo').append(
               "<div class='nav-saldo'>Error</div>"+
               "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
              })
           }
           else
           {
              $( "#saldo" ).empty();
              $('#saldo').append(
              "<div class='nav-saldo'>Saldo:</div>"+
              "<div class='header-saldo'>" + tarjetaVacia + "</div>");
            }

     });

Nota: He sustituido $(document).ready(function() { por $(function(), ya que el primero ha sido declarado obsoleto. Ver: jQuery 3 declaró document.ready obsoleto ¿hay cambios también para window.load?

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.