0

Me he encontrado con un problema al poner un modal con una imagen .gif de cargando al hacer una petición al servidor con fetch, mi problema es que el modal se queda siempre visible al parecer la respuesta de la petición es tan rapida que cuando pasa la sentencia de cerrar el modal aun no esta visible, ya puse un setTimeOut y funciona pero creo que existe una mejor solución.

Este es el codigo:

$(".custom-file-input").on("change", function () {
                var fileName = $(this).val().split("\\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            });

            $("#btnDeleteLinks").click(() => {
                $('#modalLoading').modal({
                    backdrop: 'static',
                    keyboard: false
                });
                
                const formData = new FormData();
                formData.append('file', $('#inputFile')[0].files[0]);

                fetch('delete', {
                    method: 'POST',
                    body: formData,
                    contentType: false,
                    processData: false
                }).then((response) => {
                    $("#modalLoading").modal('hide');
                }).catch((error) =>{
                    $("#modalLoading").modal('hide');

                    //Asi funciona
                   /*setTimeout(()=>{
                        $("#modalLoading").modal('hide');
                    },300)*/
                });

            });
<!DOCTYPE html>
<html lang="es">

    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="jumbotron">
            <h1 class="display-4">Eliminar Enlaces</h1>
            <hr class="my-4">
            <p>Seleccionar archivo txt con los id´s de los enlaces a eliminar.</p>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" for="inputFile">Cargar archivo</span>
                        </div>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="inputFile" aria-describedby="inputFile"
                                accept="text/plain" required="required">
                            <label class="custom-file-label" for="inputFile">Seleccionar archivo</label>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <a id="btnDeleteLinks" class="btn btn-primary btn-lg" href="#" role="button">Eliminar enlaces</a>
                </div>
            </div>
        </div>

        <!-- Modal Loading -->
        <div class="modal fade" id="modalLoading" tabindex="-1" role="dialog" aria-labelledby="Modal"
            aria-hidden="true">
            <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                <div class="modal-body">
                    <img src="https://i.gifer.com/4V0b.gif" alt="Cargando" class="imgLoading" />
                </div>
            </div>
        </div>

    </body>

</html>

Espero me puedan ayudar.

Saludos.

1 respuesta 1

0

Puedes intentar crear dos variable, una q sepa q el modal finalizo de abrir con un evento 'shown.bs.modal' y otra para saber si finalizo la petición y llamar a un metodo q si las dos se cumple, cerrar el modal

$("#btnDeleteLinks").click(() => {
    let open = false;
    let finish = false;
    
    closeModal: () => {
        if(show && finish) {                   
        $("#modalLoading").modal('hide');
        }
    }
    
    $('#modalLoading').modal({
        backdrop: 'static',
        keyboard: false
    });
    $('#modalLoading').on('shown.bs.modal', () => {
        open = true; // TERMINO DE ABRIR
        closeModal() // Si finalizo la petición, se cierra;
    });
    
    const formData = new FormData();
    formData.append('file', $('#inputFile')[0].files[0]);

    fetch('delete', {
        method: 'POST',
        body: formData,
        contentType: false,
        processData: false
    }).then((response) => {
        finish = true; // TERMINO EL REQUEST
        closeModal(); // si ya termino de abrir el modal, lo cierra;
    }).catch((error) =>{
        finish = true; 
        closeModal(); 
    });

});

2
  • Creo que en lugar de usar variable, sería mejor hacer la petición dentro de shown.bs.modal, así garantizas que la modal está abierta y no es necesario tener tantas llamadas a closeModal(). Además, tienes una variable show que no usas, tal vez debería ser open.
    – Triby
    el 27 jul. 2020 a las 21:32
  • Es una opción también, solo que de este modo, se logra realizar la petición inmediatamente. el 28 jul. 2020 a las 14:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.