AJAX-вызов с перехватом ошибок в SweetAlert2 - PullRequest
Новая
       17

AJAX-вызов с перехватом ошибок в SweetAlert2

0 голосов
/ 26 июня 2018

Я почесываю голову уже пару дней и не могу SweetAlert2 сделать AJAX-вызов и вернуть «Success», если он был успешным или выдает ошибку в том же окне. если что-то пойдет не так, оставьте пользователя свободным, чтобы повторить попытку.

Моя реализация пока следующая. Проблема в том, что он показывает ошибку в окне, но закрывает ее одновременно: 

swal({
  title: 'Submit?',
  text: 'Are those informations correct?',
  type: 'question',
  showCancelButton: true,
  confirmButtonText: 'Absolutely',
  cancelButtonText: 'Not sure',
  showLoaderOnConfirm: true,
  preConfirm: function() {
    return new Promise(function(resolve,reject) {
      $.ajax({
        url: '*****', // Invalid URL on purpose
        type: 'POST',
        data: {test: true}
      })
      .done(function(data) {
        resolve(data)
      })
      .fail(function() {
        reject()
      });

    })
  },
  allowOutsideClick: () => !swal.isLoading()
}).then((result) => {
  if (result.value) {
    swal({
      title: `Success`,
      text: result.value
    })
  }
}).catch((result) => {
  swal.showValidationError('POST failed. Please try again.');
})

В документации Я не могу найти вызов AJAX с showValidationError. Самым близким, что я нашел, является fetch() вызов, но, насколько я знаю, он предназначен только для GET.

Я также пробовал что-то вроде: return true, return false, throw new Error, обещания внутри обещаний, но это было все методом проб и ошибок, поэтому я пришел сюда.

Я тоже сделал скрипку: https://jsfiddle.net/xpvt214o/306267/

Заранее спасибо за любую помощь и / или предложения.

1 Ответ

0 голосов
/ 27 июня 2018

Еще через день я понял это. Мне нужно было .then и .catch $.ajax и прикрепить к нему swal.showValidationError, чтобы работать.

При ошибке AJAX теперь будет отображаться следующее в том же окне (пользователь может попробовать столько раз, сколько пожелает):

On error

В случае успеха:

On success

swal({
  title: 'Submit?',
  text: 'Are those informations correct?',
  type: 'question',
  showCancelButton: true,
  confirmButtonText: 'Absolutely',
  cancelButtonText: 'Not sure',
  showLoaderOnConfirm: true,
  preConfirm: () => {
    return $.ajax({
      url: '***',
      type: 'POST',
      data: 'test'
    })
    .then(response => {
      return response
    })
    .catch(error => {
      //console.log(error); // Nice to view which properties 'error' has
      swal.showValidationError(
        `An error ocurred: ${error.status}`
      )
    })

  },
  allowOutsideClick: () => !swal.isLoading()
}).then((result) => {
  if (result.value) {
    swal({
      type: 'success',
      title: 'Success',
      text: result.value
    })
  }
})

Скрипка: https://jsfiddle.net/z3kfhsj8/6/

...