More than 2 buttons on sweetalert 2

I have a sweetalert with 2 buttons but I want to have one more button in it. For example, as of now, I have yes and no I want to add one more button say later. Please help.

$("#close_account").on("click", function(e) {
    e.preventDefault();
    swal({
        title: "Are you sure?",
        text: "You will not be able to open  your account!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, close my account!",
        closeOnConfirm: false
    },
    function() {
        window.location.href="<?php echo base_url().'users/close_account' ?>"
    });
});

Thanks in advance.

Answers:

Answer

You should use custom HTML with jQuery event bindings, it works almost the same, only problem that you need to add styling for buttons by yourself because SweetAlert classes don't work for me.

$(document).ready(function() {
  $("#close_account").on("click", function(e) {
    var buttons = $('<div>')
    .append(createButton('Ok', function() {
       swal.close();
       console.log('ok'); 
    })).append(createButton('Later', function() {
       swal.close();
       console.log('Later'); 
    })).append(createButton('Cancel', function() {
       swal.close();
       console.log('Cancel');
    }));
    
    e.preventDefault();
    swal({
      title: "Are you sure?",
      html: buttons,
      type: "warning",
      showConfirmButton: false,
      showCancelButton: false
    });
  });
});

function createButton(text, cb) {
  return $('<button>' + text + '</button>').on('click', cb);
}
<link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="close_account">Show</button>

Answer

The above answer didn't work for me, so I did the following:

    $(document).on('click', '.SwalBtn1', function() {
        //Some code 1
        console.log('Button 1');
        swal.clickConfirm();
    });
    $(document).on('click', '.SwalBtn2', function() {
        //Some code 2 
        console.log('Button 2');
        swal.clickConfirm();
    });

$('#ShowBtn').click(function(){
    swal({
        title: 'Title',
        html: "Some Text" +
            "<br>" +
            '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtn">' + 'Button1' + '</button>' +
            '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtn">' + 'Button2' + '</button>',
        showCancelButton: false,
        showConfirmButton: false
    });
 });
.customSwalBtn{
		background-color: rgba(214,130,47,1.00);
    border-left-color: rgba(214,130,47,1.00);
    border-right-color: rgba(214,130,47,1.00);
    border: 0;
    border-radius: 3px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    margin: 30px 5px 0px 5px;
    padding: 10px 32px;
	}
<link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="ShowBtn" class="customSwalBtn">Alert</button>

Answer

I once needed to add the third button to SweetAlert2 popup. The simplest way in my case was to use footer which can be either plain text or HTML:

$(function() {
    $('.btn').click(function(e) {
        e.preventDefault();
        
        Swal.fire({
            icon: 'warning',
            title: 'Are you sure?',
            text: 'You won\'t be able to revert this!',
            showCloseButton: true,
            showCancelButton: true,
            footer: '<a href="#!" id="some-action">Some action</a>'
        }).then((result) => {
            console.log(result);
        });
    });
    
    $(document).on('click', '#some-action', function(e) {
        e.preventDefault();
        console.log('Some action triggered.');
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div class="text-center">
    <button type="button" class="btn btn-primary my-3">Click me</button>
</div>

Answer

Richard Cook remarked above that the original answer (provided by Konstantin Azizov) stopped working with version 4.2.6 of SweetAlert2. He suggested this had to do with nodes being cloned as they are added to the html. I don't know SweetAlert2 well enough to say whether he was right or not. I could see, though, that my buttons got added but the onclick callback functions never got called.

With a little effort, I was able to get this to work with the current release of SweetAlert2. To make it work I had to assign the onclick events to the buttons at a later point. I ended up adding ids to the buttons, making them easy to select from jQuery. Then I added on onOpen function to my swal object and in there, connected the logic to associate the callback functions. Below is a snippet of the code that works for me.

Also note that the message and buttons use some existing SweetAlert2 classes so they do have the same look as the existing UI elements. A word of caution, I did try using the swal2-confirm and swal2-cancel classes. When I did that I ran into some issues. It may be that SweetAlert2 code is dependent on there only being a single element that uses that class. I didn't have time to chase it down so I just stopped using those classes.

function createButton(text, id) {
        return $('<button class="swal2-input swal2-styled" id="'+id+'">'+text+'</button>');
    }

    function createMessage(text) {
        return $('<div class="swal2-content" style="display: block;">'+text+'</div>');
    }

function swThreeButton(msg, textOne, textTwo, textThree, callbackOne, callbackTwo, callbackThree) {

        var buttonsPlus = $('<div>')
                .append(createMessage(msg))
                .append(createButton(textOne,'sw_butt1'))
                .append(createButton(textTwo,'sw_butt2'))
                .append(createButton(textThree,'sw_butt3'));

        swal({
            title: 'Select Option',
            html: buttonsPlus,
            type: 'question',

            showCancelButton: false,
            showConfirmButton: false,
            animation: false,
            customClass: "animated zoomIn",
            onOpen: function (dObj) {
                $('#sw_butt1').on('click',function () {
                   swal.close();
                   callbackOne();
                });
                $('#sw_butt2').on('click',function () {
                    swal.close();
                    callbackTwo();
                });
                $('#sw_butt3').on('click',function () {
                    swal.close();
                    callbackThree();
                });
            }
        });

    };


Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.