SweetAlert2 - динамическая очередь без нажатия кнопки подтверждения?

Я использую последнюю версию подключаемого модуля jQuery SweetAlert2. Я хочу использовать функцию "Динамическая очередь" для вызова AJAX. Итак, на главной странице есть хороший пример, но вам нужно сначала нажать кнопку подтверждения, чтобы выполнить вызов AJAX. Я не хочу этого, когда отображается предупреждение, вызов AJAX должен выполняться немедленно, без нажатия кнопки. Итак, как это сделать?

Вот пример с главной страницы

swal.queue
([{
    title: 'Your public IP',
    confirmButtonText: 'Show my public IP',
    text: 'Your public IP will be received via AJAX request',
    showLoaderOnConfirm: true,
    preConfirm: function()
    {
        return new Promise(function (resolve)
        {
            $.get('https://api.ipify.org?format=json').done(function(data)
            {
                swal.insertQueueStep(data.ip);
                resolve();
            });
        });
    }
}])

dynamic queue ajax sweetalert2 sweetalert
person Piet    schedule 25.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы должны передать обратный вызов с запросом AJAX на параметр onOpen:

Swal.queue([{
  title: 'Your public IP',
  confirmButtonText: 'Show my public IP',
  text:
    'Your public IP will be received ' +
    'via AJAX request',
  onOpen: () => {
    fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => {
        Swal.insertQueueStep(data.ip)
      })
  }
}])
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

person Limon Monte    schedule 25.11.2016
comment
Спасибо за быстрый ответ! Поэтому я создал скрипт и использовал ваш пример для создания вызова AJAX, который должен загрузить полную страницу веб-сайта. Как вы думаете, это хорошее решение для загрузки большого количества данных, полученных от вызова AJAX? jsfiddle.net/wzrcdwx3 - person Piet; 25.11.2016
comment
Конечно, почему бы и нет. Есть загрузчик, который указывает на текущий процесс. - person Limon Monte; 25.11.2016

arrow_upward
1
arrow_downward

Мой рабочий пример для автоматической отправки формы с загрузкой сладкого оповещения и отображением результатов.

var preMessage = $('#new-ad-form').attr('pre-message');
var formData = $('#new-ad-form').serialize();
var formUrl = $('#new-ad-form').attr('action');

Swal.queue([{
        allowOutsideClick: false,
        allowEscapeKey: false,
        title: preMessage,
        showConfirmButton: false,
        showCloseButton: false,
        showCancelButton: false,
        onOpen: () => {
            Swal.showLoading();
            return fetch(formUrl, {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': "application/x-www-form-urlencoded",
                }
            })
                    .then(response => response.json())
                    .then(data => {
                        Swal.hideLoading();
                        if (data.status == 'success') {
                            Swal.update({
                                allowEscapeKey: false,
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                showCloseButton: false,
                                showCancelButton: false,
                                type: 'success',
                                title: false,
                                html: data.html
                            })
                        } else {
                            Swal.update({
                                type: 'error',
                                title: false,
                                html: data.html,
                                allowEscapeKey: true,
                                allowOutsideClick: true,
                                showConfirmButton: true,
                            })
                        }
                    })
                    .catch(() => {
                        Swal.hideLoading();
                        Swal.update({
                            type: 'error',
                            title: 'Save request error!',
                            html: false
                        })
                    })
        }
    }]);
person konrad871030    schedule 28.07.2019