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.