Sweetalert: swal.stopLoading() with closeModal: false breaks swal

Created on 12 Oct 2017 · 7Comments · Source: t4t5/sweetalert

When using swal.stopLoading() with closeModal: false, swal completely stops functioning if trying to press confirm again. This happens to me when I stop the loading process when a SWAL input fails to validate - pressing confirm a second time no longer has an effect (gets stuck in permanent loading state, but doesn't fire the .then() event again). Basically I am trying to mimic swal.showInputError() that was deprecated, but am not able to.

example:

swal({
    icon: "info",
    title: "Feedback",
    content: content, // This is an Input Form, with an element trailing that will hold errors.
    buttons: {
        cancel: "Go back",
        confirm: {
            text: "Leave feedback",
            closeModal: false
        }
    }
})
.then(function (isConfirmed) {
        if (isConfirmed) {
            var $feedbackForm = $('#js-Form'),
                feedbackLength = $feedbackForm.find('input[name="feedback"]').val().length,
                $swalErrorMsg = $('.js-swalError');

            if (feedbackLength < 5) {
                swal.stopLoading();
                $swalErrorMsg.html("Feedback needs to be at least 5 characters long!");
                $swalErrorMsg.show();
            } else {
                $feedbackForm.submit();
            }
        }
})

Source

Hybridx24

👍3

Most helpful comment

Having the same issue, too. And my colleague found out a trick to handle this issue. Maybe you can have a try:

var config = {
    icon: 'info',
    title: 'test',
    buttons: {
        cancel: {
            text: 'Go back',
            visible: true,
            value: false,
        },
        confirm: {
            text: 'Leave feedback',
            value: true,
            closeModal: false
        }
    }
};
var doSomething = () => { console.log('aaa'); };

(function trick() {
    swal(config).then(isConfirm => {
        if (isConfirm) {
            doSomething();
            swal.stopLoading();
            trick();
        } else {
            swal.close();
        }
    })
})();

Dixiat on 3 Nov 2017

🎉4 👍3

All 7 comments

Having the same issue..

violetzie on 25 Oct 2017

👍2

Having the same issue, too. And my colleague found out a trick to handle this issue. Maybe you can have a try:

var config = {
    icon: 'info',
    title: 'test',
    buttons: {
        cancel: {
            text: 'Go back',
            visible: true,
            value: false,
        },
        confirm: {
            text: 'Leave feedback',
            value: true,
            closeModal: false
        }
    }
};
var doSomething = () => { console.log('aaa'); };

(function trick() {
    swal(config).then(isConfirm => {
        if (isConfirm) {
            doSomething();
            swal.stopLoading();
            trick();
        } else {
            swal.close();
        }
    })
})();

Dixiat on 3 Nov 2017

🎉4 👍3

@Hybridx24 here's a solution I've used to solve this exact same issue:

https://codepen.io/mbezhanov/pen/japOaJ

What I'm trying to say is: don't use the Promise object that swal() returns to issue your AJAX requests. Instead - attach your own custom click handler to the Submit button, and issue the AJAX requests in that handler (using jQuery, Axios, or whatever)

Hopefully, you'll find this useful.

mbezhanov on 25 Nov 2017

❤1 👍1

I'm having the same issue also. Any idea if this bug will be fixed any time soon?

PeterLambCSA on 22 May 2020

@Dixiat Thank you so much for this process. it works perfectly. It's already 2020, and I should dig in 2017 post to find my answer to this issue. hahahaha

Having the same issue, too. And my colleague found out a trick to handle this issue. Maybe you can have a try:

var config = {
    icon: 'info',
    title: 'test',
    buttons: {
        cancel: {
            text: 'Go back',
            visible: true,
            value: false,
        },
        confirm: {
            text: 'Leave feedback',
            value: true,
            closeModal: false
        }
    }
};
var doSomething = () => { console.log('aaa'); };

(function trick() {
    swal(config).then(isConfirm => {
        if (isConfirm) {
            doSomething();
            swal.stopLoading();
            trick();
        } else {
            swal.close();
        }
    })
})();