(JSFIDDLE included) sweet alert js - button swap (the confirm button to the left, and cancel button to the right)

Question

I am using the sweet alert js, I want to swap the confirm button to the left, and cancel button to the right. I tried swapping it but then the images and animations are not implemented in the correct way.

JSFIDDLE

$(document).ready(function () {
    $('#comment-send').on('click',function () {
        swal({
            title: "Emin misiniz?",
            text: "Yorumunuzu gönderiyoruz",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "EVET",
            cancelButtonText: "HAYIR",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function (isConfirm) {
            if (isConfirm)
            {
                swal("Gönderildi!", "Yorumunuz gönderilmiştir!", "success");
            }
            else
            {
                swal("İptal edildi!", "Yorum gönderimi iptal edilmiştir!", "error");
            }
        });
    });
});

Answer 1

You are using a very old version of sweetalert (0.4.2).

It is impossible to reverse the buttons in that version unless you "hack" it with CSS.

You need to upgrade to the newest sweetalert version (https://unpkg.com/sweetalert/dist/sweetalert.min.js).

No CSS file is needed anymore with the new version. It uses a JavaScript promise (the keyword then) now to get the clicked button (whether they clicked OK or Cancel).

$(document).ready(function () {
    $('#comment-send').on('click',function () {
        swal({
            title: "Emin misiniz?",
            text: "Yorumunuzu gönderiyoruz",
            icon: "warning",
            buttons: {
                confirm: 'Yes',
                cancel: 'No'
            },
        }).then(function (isConfirm) {
            if (isConfirm)
            {
                swal("Gönderildi!", "Yorumunuz gönderilmiştir!", "success");
            }
            else
            {
                swal("İptal edildi!", "Yorum gönderimi iptal edilmiştir!", "error");
            }
        });
    });
});

Look at the part:

buttons: {
    confirm: 'Yes',
    cancel: 'No'
},

You can change the position of the buttons in there. If you put confirm: 'Yes' after cancel: 'No', then the OK button will go back to the right.

https://jsfiddle.net/6u7j73qb/12/