Question 37163 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to use sweetalert / swal correctly? – Jquery

I am new in Javascript / jQuery. I want to show some alert message using ‘sweetalert’ library and based on the user response the function will either return or continue.

Here is my implementation :

  jQuery("#some_exchnage_request_form").on( 'submit', function(e){
        
        // some implementation
        // Now showing the alert
        
        jQuery.getScript('https://unpkg.com/sweetalert/dist/sweetalert.min.js', function() {
            
         swal({
                title: "Do you want Continue ? ",
                text: "You need to pay extra amount",
                icon: "success",
                buttons: true,
                confirmButtonColor: '#C64EB2',
              })
              .then((willSubmit) => {
                if (!willSubmit) {
                   return false;
                }
              });
        }); 
       // rest of the code
    });

Here the expectation is if the user select ‘cancel’ button the function should return false, otherwise on selecting ‘ok’ button ‘rest of the code’ portion to be executed.

But here problem is the code doesn’t stop for the user input and just continue. The alert box is displayed but it ignore the user selection.

I know implementation is wrong, but not sure what would be the correct way to do this.

Thanks!!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There are similar questions and looks like it is a limitation of 'sweetalert' that execution doesn't stop for user input unlike alert()/confirm() in js.

    sweetalert pause execution and return value

    How to return the value of SweetAlert2 input?


  2. 0

    You need to use Swal.fire(); to make it work.

    https://sweetalert2.github.io/

    jQuery("#some_exchnage_request_form").on( 'submit', function(e){

    // some implementation
    // Now showing the alert
    
    e.preventDefault();
    
    jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11', function() {
    
    Swal.fire({
      title: 'Do you want Continue ?',
      text: "You need to pay extra amount",
      icon: 'success',
      showCancelButton: true,
      confirmButtonColor: '#C64EB2',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Confirmed!',
          'You agreed to pay extra amount.',
          'success'
        )
      } else {
        console.log('clicked cancel');
      }
    })
    
    })
    
   // rest of the code
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
  <input type="submit">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search