Sweet alert redirects before the user clicks OK

Question

I'm using SweetAlert2 and want to redirect the user to a different page, BUT after the success alert and the user clicks OK.

this one:

    swal({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    },
    function() {
        swal(
          'Deleted!',
          'Your file has been deleted.',
          'success'
        );
    });

like this:

function deleteEvent(id)
{
    swal({
        title: 'Are you sure?',
        text: 'You will not be able to recover this event!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    }).then(function() {
        swal(
          'Deleted!',
          'Your event has been deleted.',
          'success'
        );
            $.ajax({
                url: '/events/'+id,
                type: "DELETE",
                data:{ _token: "{{csrf_token()}}" },
                success: function() {
                    location.href = '/events';
                }
            });
    });
}

But when the user clicks the confirm button to delete....this popup

goes right away because of my redirect and the user doesn't even get the chance to click the OK button...

How can i make the redirect AFTER the user clicks the OK on this image?

sorry that I am unable to reproduce the above issue in 7th example. works fine for me — Gopinath Shiva, Nov 16 '16 at 09:46
yes, the example is fine but in my code this is the problem `success: function() { location.href = '/events'; }` it goes straight away when user click the yes delete it on first pop up....and this image that i posted with green checkmark is gone almost immediatelly. user doesn't get a chance to click it at all...because it redirects the page header. I want to redirect after the user clicks OK button — lewis4u, Nov 16 '16 at 09:48
Ok remove ajax call from the function, add an Event Listener (using .on , which works for dynamic elements ) on the OK button, and try redirecting. Hope this helps — Gopinath Shiva, Nov 16 '16 at 09:51
But i don't have access to this OK button it's implemented in sweet alert :( — lewis4u, Nov 16 '16 at 09:52
add an event listener to $('.sweet-container .confirm') - http://stackoverflow.com/questions/8191064/jquery-on-function-for-future-elements-as-live-is-deprecated — Gopinath Shiva, Nov 16 '16 at 09:55
I don't know what you meant but this is the right solution for me -> see the answer — lewis4u, Nov 16 '16 at 10:56

score 9 · Accepted Answer · answered Nov 16 '16 at 10:56

I finally solved this on my own:

function deleteEvent(id)
{
    swal({
        title: 'Are you sure?',
        text: 'You will not be able to recover this event!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    }).then(function() {

        $.ajax({
            url: '/events/'+id,
            type: "DELETE",
            data:{ _token: "{{csrf_token()}}" }
        }).done(function() {

            swal({
                title: "Deleted", 
                text: "Event has been successfully deleted", 
                type: "success"
            }).then(function() {
                location.href = '/events';
            });
        });
    });
}

Sweet alert redirects before the user clicks OK

1 Answers1