SweetAlert2 - Dynamic queue without clicking confirm button? - ajax

Question

I am using the latest version of the jQuery plugin SweetAlert2. I want to use the "Dynamic queue"-function to make a AJAX call. So on the homepage there is a nice example, but you have to click a confirm button first to execute the AJAX call. I do not want this, when the alert is shown the AJAX call should execute immediately, without clicking a button. So how to do this?
Here the example from the homepage
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();
});
});
}
}])

Answer 1

You should pass the callback with the AJAX request to onOpen parameter:
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>

Answer 2

My working example for auto submit form with sweetalert loading and display results.
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
})
})
}
}]);