Callback function not being called - SweetAlert

Question

I am calling a sweetalert on basis of the result of an if statement.

    for (int i = 0; i < count; i++) {
        if (numValue == 0) {
            swal({
                    title: 'Warning',
                    text: "Hey there..!!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    confirmButtonClass: 'confirm-class',
                    cancelButtonClass: 'cancel-class',
                    allowOutsideClick: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        console.log("isConfirm in if: " + isConfirm);
                        $scope.$apply(function() {
                            $scope.saveAfterPSConfirm();
                        });
                    } else {
                        console.log("isConfirm in else: ");
                        return;
                    }
                }


            );
        }
    }

This calls a warning sweet alert if numValue is 0. For sample, numValue is 0.

While calling this snippet, sweet alert warning message "Hey there..!!" comes but immediately dissolves, without waiting for any button click for numValue popup. The issue is callback function of numvalue sweet alert is not getting called.

Not clear what's wrong looks like you have a for loop with a swal call in it then an if statement after that with another swal call in it if you want to block and not show the second one before the first returns why isn't the second one in the callback for the first? — shaunhusain, Nov 29 '17 at 06:50
@shaunhusain because first swal call and second swal call are not related in any way... Also, my problem is callback of swal is not getting called. — anukuls, Nov 29 '17 at 06:59
helps if you just reduce the problem to minimal reproduction so as to not confuse matters. Sounds like you're saying in both cases the callback just doesn't get fired, did you try adding a breakpoint or `debugger` statement in the callback function. — shaunhusain, Nov 29 '17 at 07:02
I did add debugger, and realized that callback is not getting fired. It looks like there's one alert popup and immediately there is another alert popup. Ideally, I expect first popup to wait to click some button (confirm/cancel) and perform callback accordingly. — anukuls, Nov 29 '17 at 07:10
Well that's why I was saying you'd want to have the second swal call in the callback function of the first, in general JS isn't going to block just because some UI elements have been added to the view the function will continue to execute statements (the native window.alert or window.prompt are exceptions to the rule but not the rule). Regarding not hitting the callback though sounds like an issue in the swal code nothing in angular should be blocking that, try enabling the "pause on exceptions" in the debug panel to see if it's hitting some caught exception. — shaunhusain, Nov 29 '17 at 07:12
Maybe my edit helps, second swal call is not dependent on first swal in any way. Calling it from callback of first would create a dependency which is not required. I have removed second swal from the code. — anukuls, Nov 29 '17 at 07:17
Let me rephrase my words, I am calling a sweet alert (based on an if statement) with confirm/cancel buttons. This popup comes nicely, but is not retained i.e it comes up on screen and immediately gets dissolved. Ideally, it should have waited for a button press. — anukuls, Nov 29 '17 at 07:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160055/discussion-between-shaunhusain-and-anukuls). — shaunhusain, Nov 29 '17 at 07:21

score 2 · Answer 1 · edited Feb 03 '20 at 22:05

I have brought a fiddle which is based on your code.

And this fiddle used SweetAlert2.

Check this

In my project, I've used return swal() so I applied your code to it which works well.

Code is as follows:

swal({
    title: 'Warning',
    text: "Hey there..!!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes',
    cancelButtonText: 'No',
    confirmButtonClass: 'confirm-class',
    cancelButtonClass: 'cancel-class',
    allowOutsideClick: false
}).then(function(isConfirm) {
    if (isConfirm) {
        console.log("isConfirm in if: " + isConfirm);
        $scope.$apply(function() {
            //$scope.saveAfterPSConfirm();
        });
        count += 1;
        if(count < 3){           // input count.length instead of 3
            $scope.callAlert(count);
        }
    } else {
        console.log("isConfirm in else: ");
        return;
    }
});

I made the function recursive which means that this function will call itself until count.length.

I hope my solution is helpful for you. :)

Callback function not being called - SweetAlert

1 Answers1