¿Cómo puede usar sweetalert para hacer una llamada Ajax sin un botón de confirmación pero aún mostrar un gif de carga? Básicamente, quiero que se muestre un gif de carga mientras se ejecuta la llamada Ajax. La solución lista para usar requiere que habilite el botón de confirmación antes de realizar la llamada Ajax.
Lo siguiente obviamente no funciona:
window.swal({ title: "Checking...", text: "Please wait", imageUrl: "images/ajaxloader.gif", showConfirmButton: false, allowOutsideClick: false }, function () { $.getJSON('myurl').done(function (data) { swal("", "Good job!", "success"); }).fail(function (jqXHR, textStatus, err) { swal("", "An error occurred", "error"); }); });No necesitas hacer nada especial. Simplemente haga su llamada ajax después de mostrar swal, y vuelva a llamar a swal cuando se complete su ajax.
window.swal({ title: "Checking...", text: "Please wait", imageUrl: "images/ajaxloader.gif", showConfirmButton: false, allowOutsideClick: false }); //using setTimeout to simulate ajax request setTimeout(() => { window.swal({ title: "Finished!", showConfirmButton: false, timer: 1000 }); }, 2000); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />Ejemplo de implementación basado en la muy útil respuesta de Ozan :
Usando vue-sweetalert2, VueJS 2 y Axios, y una animación de carga integrada:
let self = this; this.$swal.fire({ title: "Processing Request...", text: "Please wait", onBeforeOpen() { self.$swal.showLoading(); //Adds built in loader animation during modal open }, onAfterClose() { self.$swal.hideLoading(); //might not be necessary }, allowOutsideClick: false, //makes modal behave captively allowEscapeKey: false, allowEnterKey: false }); axios .post(`/api/myapi`, {"fake": "fake"}) .then(r => { this.$swal.update({ title: "Finished", html: `Response data: ${r.data}` }); this.$swal.hideLoading(); //Disables loader spinner, enables button }) .catch(err => { this.$swal.update({ title: "FAILED!", text: "Something went wrong - either try again or contact support." }); this.$swal.showValidationMessage(`Request failed: ${err}`); this.$swal.hideLoading(); //Disables loader spinner, enables button })