Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sweet alert timer - done function

I have been playing a little with the SweetAlert plugin: Sweet alert

I wanted to make a delete button, where the user gets prompted before the actual delete. When the user then presses "delete" again, is then says "done" and the user has to click "ok" again for the prompt to go away for good.

SweetAlert has a timer function, so you can auto-close that last "Done" prompt after a few seconds or so, which works just fine. They also have a feature, where you can implement a function to be run when the user clicks "OK" on the "Done" prompt. Problem is, that function is not ran if the prompt auto closes after the timer is done.

Any ideas how this can be done?

With timer and function not being run:

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

Without timer, but with a working function (when clicking the "ok" button):

swal("Deleted!", "Your row has been deleted.", "success"), function () {
    location.reload();
    tr.hide();
};
like image 894
Teilmann Avatar asked Apr 29 '15 13:04

Teilmann


People also ask

How do you confirm with sweet alert?

SweetAlert uses promises to keep track of how the user interacts with the alert. If the user clicks the confirm button, the promise resolves to true . If the alert is dismissed (by clicking outside of it), the promise resolves to null . swal("Click on either the button or outside the modal.")

How do I add a close button to sweet alert?

Just add showCloseButton: true and this will show the close X icon in the top right corner of the pop up.

What is sweet alert?

Sweet Alert is a way to customize alerts in your games and websites. It allows you to change from a standard JavaScript button. We can add buttons, change the color text, and even add additional alerts that change depending on user click.

Is Sweet Alert free?

sweetalert – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers.


2 Answers

Explanation

I think you have to take the swal apart from the function. What I mean is that the swal is displayed, the function runs on the background and the modal automatically closes.

Javascript/jQuery:

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

Your code with an example of 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");
        }
    });
like image 184
Hkidd Avatar answered Oct 31 '22 04:10

Hkidd


solution is here.

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

See. A message with auto close timer

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> milliseconds.',
  timer: 2000,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getHtmlContainer().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')
  }
})

My code

swal.fire({ type: 'success', title: 'Saved.', 
            showConfirmButton: false, timer: 1500 
}).then((result) => {
    if (result.dismiss === Swal.DismissReason.timer) {
         $("#new_reminder").modal("hide");                            
    }
});
like image 39
TodsaHerb Avatar answered Oct 31 '22 05:10

TodsaHerb