adam78 adam78 - 7 months ago 29
Ajax Question

Sweet Alert - Ajax call without confirm button

How can you use sweetalert to do an Ajax call without a confirm button but still show a loading gif? Basically I want a loading gif to display while the Ajax call is running. The out-of-the-box solution requires you to enable the confirm button before the Ajax call is made.

The following obviously doesn't work:

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");
});
});

Answer Source

You don't need to do anything special. Just make your ajax call after you display swal, and call swal again when your ajax is completed.

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" />