Error when use jQuery sweetalert2

Question

This is my code before add sweetalert2 to delete posts:

if (action == "delete") {
            this.model.destroy({
                beforeSend: function() {
                    target.addClass('loading');
                    view.blockUi.block(view.$el);
                },
                success: function(result, status, jqXHR) {
                    view.blockUi.unblock();
                    target.removeClass('loading');
                    if (status.success) {

                        if (result.get('post_type') == "post")
                            window.location.href = status.redirect;
                        else
                            view.$el.fadeOut();
                    } else {
                        // Error
                    }
                }
            });
            return false;
        }

this is my edit to make sweetalert2 compatible with the action:

if (action == "delete") {

            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then(function () {
                swal(
                    'Deleted!',
                    'Your post has been deleted.',
                    'success'
                ),
                  this.model.destroy({
                    beforeSend: function() {
                        target.addClass('loading');
                        view.blockUi.block(view.$el);

                    },

                        success: function(result, status, jqXHR) {
                            view.blockUi.unblock();
                            target.removeClass('loading');
                            if (status.success) {

                                if (result.get('post_type') == "post")
                                    window.location.href = status.redirect;
                                else
                                    view.$el.fadeOut();
                            } else {
                                // Error
                            }

                    }
                })
            });
            return false;
        }

I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?

Answer 1

I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?

When you initially call sweetalert it prompts for a response from the user.

The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.

If the user confirms, then you can execute the code. You already implemented a way to catch success and error, so when either of those happen, you just need to call sweetalert again to over ride the previous and display the correct alert to the user. You can do the same, optionally, for if the user decides to cancel to give them more feedback.

I believe that this would do the trick:

if (action == "delete") {

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
}).then(function () {

      this.model.destroy({
        beforeSend: function() {
            target.addClass('loading');
            view.blockUi.block(view.$el);

        },
            success: function(result, status, jqXHR) {
                view.blockUi.unblock();
                target.removeClass('loading');
                if (status.success) {
                    // Success
                    swal(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                      )
                } else {
                    // Error
                    swal(
                      'Failed',
                      'Your file has not been deleted',
                      'error'
                    )
                }

        }
    })
}, function () {
// Cancelled
    swal(
      'Cancelled',
      'Your file has not been deleted',
      'error'
    )
});

return false;
}