Search code examples
javascriptpromisesweetalertfinallysweetalert2

Chaining sweetalert2 modals


I am using sweetalert2 for validating an email address but I would like it to then display a text input for a name to be entered. I understand that it chain modals but I can't for the life of me work out how from the example given on the page?

var cloud_email = $('.cloud_email').text();
var user_name = $('.user_name').text();;
swal.setDefaults({
  confirmButtonText: 'Next →',
  showCancelButton: true,
  animation: false
});

var steps = [
  {
    //ask for and validate email here
    type: 'question',
    title: 'Please enter email address',
    input: 'email',
    inputValue: cloud_email  
  },
  {
    //ask for and validate text input here
    type: 'question',
    title: 'Please enter user name',
    input: 'text',
    inputValue: user_name
  }
];

swal.queue(steps).then(function(email, name) {
  swal({
    type: 'success',
    html: 'Email successfully sent to: ' + name + ': '+ email
  });
}).finally(function() {
  swal.resetDefaults();
  //ajax to process values passed
})

My attempt returns this error:

swal.queue(...).then(...).finally is not a function

Solution

  • To use finally() method, you should include a polyfill for Promise.prototype.finally to your page, e.g.:

    <script src="https://cdn.jsdelivr.net/promise.prototype.finally/1.0.1/finally.js"></script>
    

    PS. I just added the link to Promise.prototype.finally polyfill to the example page: https://sweetalert2.github.io/#chaining-modals