Sweet Alert - вызов Ajax без кнопки подтверждения

Как вы можете использовать sweetalert для выполнения вызова Ajax без кнопки подтверждения, но при этом показывать загрузку GIF? В основном я хочу, чтобы загрузочный gif отображался во время вызова Ajax. Стандартное решение требует, чтобы вы активировали кнопку подтверждения до выполнения вызова Ajax.

Следующее явно не работает:

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

javascript jquery ajax sweetalert
person adam78    schedule 13.04.2017    source источник
comment
limonte.github.io/sweetalert2/#ajax-request   -  person Limon Monte    schedule 13.04.2017

Ответы (2)


arrow_upward
7
arrow_downward

Вам не нужно делать ничего особенного. Просто сделайте свой ajax-вызов после отображения swal и снова вызовите swal, когда ваш 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" />

person Ozan    schedule 13.04.2017

arrow_upward
0
arrow_downward

Пример реализации на основе очень полезного ответа Озана:

Используя vue-sweetalert2, VueJS 2 и Axios, а также встроенную анимацию загрузчика:

  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
    })
person PotatoFarmer    schedule 02.10.2020