Search code examples
sweetalert2

Sweetalert2 javascript (progresStep)

So, I'm having some problem with sweetalert2 (I'm new here).

I have this script and i don't know how to make to be with progress step (see the .gif below)

<a href="javascript:void(0)" onclick="givepptoplayer()">Set Premium Points</a></li>

<script>
  function givepptoplayer() {
    swal({
       title: 'Change User Premium Points <?php echo $data->name ?>',
       input: 'number',
       showCancelButton: false,
       confirmButtonText: 'edit',
       showLoaderOnConfirm: true,
       confirmButtonClass: 'btn btn-success',
       cancelButtonClass: 'btn btn-danger m-l-10',
       allowOutsideClick: false,
       inputValue: '',
     }).then(function (result) {           
       $.post('<?php echo config::$_PAGE_URL ?>api/finishthis', { 'userid' : '<?php echo $data->id ?>', 'changePP': result.value}, function(result) 
         { 
           swal({
             type: 'success',
             title: 'Succes!',
             html: result
           });
         });
     });                                    
   }
</script>

I want when to make a progressStep something like here: https://gyazo.com/41f65065108e3937e3afc2a3064ee028

Can you guys give me an example please?

Solution

  • There is an example of chaining modals with related code on https://sweetalert2.github.io/#chaining-modals. Basically the code is: 

    swal.mixin({
  input: 'text',
  confirmButtonText: 'Next &rarr;',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    swal({
      title: 'All done!',
      html:
        'Your answers: <pre><code>' +
          JSON.stringify(result.value) +
        '</code></pre>',
      confirmButtonText: 'Lovely!'
    })
  }
})