web-dev-qa-db-fra.com

SweetAlert2 - Lier un autre événement pour annuler le bouton?

J'utilise la dernière version du plugin génial SweetAlert2 jquery.

J'ai un simple SweetAlert avec 2 boutons. 1 bouton est le bouton de confirmation, l'autre est le bouton d'annulation. J'utilise l'option html pour ajouter une entrée de texte à l'alerte. Lorsque l'utilisateur appuie sur le bouton de confirmation, un appel AJAX est exécuté et l'alerte est fermée.

Maintenant, je veux utiliser le bouton Annuler pour exécuter un autre code au lieu de l'action par défaut qui ferme l'alerte. (L'utilisateur peut fermer l'alerte à l'aide de showCloseButton: true).

Donc en bref: Comment supprimer le gestionnaire de fermeture et ajouter un propre gestionnaire personnalisé au bouton d'annulation de swal?

buttonsweetalertsweetalert2
8
Piet
  1. Vous pouvez créer un fichier html personnalisé et avoir un bouton d'annulation qui déclenchera votre propre gestionnaire d'annulation.

par exemple

<html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });

  1. Vous pouvez simplement rappeler le popup sur annuler. Ajoutez ceci à votre fonction swal.

    function (dismiss) {
   if (dismiss === 'cancel') {
      swal({..});            
   }
}
5
Hayden Passmore

Ajoutez simplement votre fonction personnalisée pour attraper le rejet, par exemple:

swal({
   title: 'Some title',
   text: 'some text for the popup',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'Some text for cancel button'
}).then(function(){
   // function when confirm button clicked
}, function(dismiss){
   if(dismiss == 'cancel'){
       // function when cancel button is clicked
   }
});

Vous pouvez même ajouter plus de fonctions pour intercepter un autre événement de rejet, lisez simplement SweetAlert2 Docs pour plus d'informations sur l'événement de rejet.

16
Raditya Adi Baskara

avec un peu de personnalisation à @Raditya Adi Baskara réponse,

swal({
        title: "$titleWarnignBox",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#36c6d3',
        cancelButtonColor: '#d33',
        confirmButtonText: '$confrimBtn',
        cancelButtonText: '$cancelBtn'
    }).then(function(result){
        if(result.value){
            console.log('good');
        }else if(result.dismiss == 'cancel'){
           console.log('cancel');
        }

    });
10
Hakeem Nofal

Dans sweetalert 2

            swal.fire({
                title: "Notice",
                text: "Are you sure ?",
                showCancelButton: true,
                type: 'error',
                cancelButtonColor: '#d33',
            })
                .then((res) => {
                    if(res.value){
                        console.log('confirmed');
                    }else if(res.dismiss == 'cancel'){
                        console.log('cancel');
                    }
                    else if(res.dismiss == 'esc'){
                        console.log('cancle-esc**strong text**');
                    }
                });
1
shahin developer