web-dev-qa-db-fra.com

Minuterie d'alerte douce - fonction terminée

J'ai joué un peu avec le plugin SweetAlert: Sweet alert

Je voulais créer un bouton de suppression, où l'utilisateur est invité avant la suppression réelle. Lorsque l'utilisateur appuie à nouveau sur "supprimer", il dit alors "terminé" et l'utilisateur doit cliquer à nouveau sur "ok" pour que l'invite disparaisse définitivement.

SweetAlert a une fonction de minuterie, vous pouvez donc fermer automatiquement cette dernière invite "Terminé" après quelques secondes, ce qui fonctionne très bien. Ils ont également une fonctionnalité, où vous pouvez implémenter une fonction à exécuter lorsque l'utilisateur clique sur "OK" sur l'invite "Terminé". Le problème est que cette fonction n'est pas exécutée si l'invite se ferme automatiquement une fois la minuterie terminée.

Des idées sur la façon dont cela peut être fait?

Avec timer et fonction non exécutée:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     },
     function () {
            location.reload(true);
            tr.hide();
     });

Sans timer, mais avec une fonction de travail (en cliquant sur le bouton "ok"):

swal("Deleted!", "Your row has been deleted.", "success"), function () {
    location.reload();
    tr.hide();
};
javascriptjquerysweetalert
7
Thomas Teilmann

Explication

Je pense que vous devez prendre le swal en dehors de la fonction. Ce que je veux dire, c'est que le swal est affiché, la fonction s'exécute en arrière-plan et le modal se ferme automatiquement.

Javascript/jQuery:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     });
     function () {
        location.reload(true);
        tr.hide();
     };

Votre code avec un exemple de SweetAlert:

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
    },
    function (isConfirm) {
        if (isConfirm) {
           swal({
              title: "Deleted!",
              text: "Your row has been deleted.",
              type: "success",
              timer: 3000
           });
           function () {
              location.reload(true);
              tr.hide();
           };
        }
        else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });
12
Hkidd

Vous ne pouvez pas utiliser simplement then?

Cette façon est beaucoup plus propre.

swal({
    title: 'Login Success',
    text: 'Redirecting...',
    icon: 'success',
    timer: 2000,
    buttons: false,
})
.then(() => {
    dispatch(redirect('/'));
})
5
Sonson Ixon

j'ai trouvé la solution.

Actuellement, j'expérimente avec sweetAlert et j'ai trouvé une solution à votre question.
Ceci est ma fonction personnalisée pour créer une alerte douce qui se fermera après quelques secondes de minuterie.

var sweetAlert = function(title, message, status, timer = 5000, isReload = false){
    swal({
        title   : title,
        text    : message + '<br/>This pop up will close automatically in <strong class="swal-timer-count">' + timer/1000 + '</strong> seconds...',
        type    : status,
        html    : true,
        timer   : timer,
        allowEscapeKey  : false
    }, function () {
        swal.close();
        if(isReload)
            location.reload(true);
    });
    var e = $(".sweet-alert").find(".swal-timer-count");
    var n = +e.text();
    setInterval(function(){
        n > 1 && e.text (--n);
    }, 1000);
}

Vous pouvez appeler cette méthode en utilisant ce code
( N'oubliez pas que la minuterie utilise des millisecondes. 

sweetAlert('Congratulation!', 'You successfully copy paste this code', 'success', 3000, false);
4
Fendi Setiawan

ce problème est résolu avec la nouvelle version de Sweetalert 2

https://limonte.github.io/sweetalert2/

voir Plunker

Plunker

.
3
Ali Mohammed

la solution est ici.

[ https://sweetalert2.github.io/]

Voir. Un message avec minuterie de fermeture automatique

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> milliseconds.',
  timer: 2000,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getContent().querySelector('strong')
        .textContent = Swal.getTimerLeft()
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})

Mon code

swal.fire({ type: 'success', title: 'Saved.', 
            showConfirmButton: false, timer: 1500 
}).then((result) => {
    if (result.dismiss === Swal.DismissReason.timer) {
         $("#new_reminder").modal("hide");                            
    }
});
0
TodsaHerb