The code execution continues as Sweetalert does not wait for the user's response

Question

The code execution continues as Sweetalert does not wait for the user's response

swal({title: "Are you sure?", text: "Your form will be submitted", confirmButtonText: "Ok",  
showConfirmButton:true, showCancelButton: true, cancelButtonText: "No", type:"warning", closeOnConfirm: false,
                    closeOnCancel: false },
                    function(isConfirm) {
                        if (isConfirm) {
                            swal({
                                title: 'Confirm!',
                                text: 'Successfully Submitted!',
                                type: 'success'
                            }, function() {
                                console.log("Inside Function"); 
                                $scope.applyleave("ok");
                            });

                        } else {
                            swal("Cancelled", "Your application not submitted :)", "error");
                            return false;
                        }
                    });

The code flow should only continue after clicking 'Ok', but it currently executes without any user action.

I am submitting the form from HTML to this JS, but I want to block the confirmation box and wait for user action. I want to allow the below code to execute only when the user presses 'Ok'.

javascript angularjs sweetalert

Answer 1

Answer №1

It's a common challenge in javascript event handling.

If you want to mimic a standard popup behavior, encapsulate the actions that should only occur after user input in a function. Then, call that function within the isConfirm function.

Standard popup example:

if (confirm("Are you sure?")) {
    console.log("Yes!");
}
else {
    console.log("No!");
}

console.log("Goodbye!");

Sweet Alert example:

sweetAlert({ title: "Are you sure?" },
    function(isConfirm) {
        if (confirm("Are you sure?")) {
            console.log("Yes!");
        }
        else {
            console.log("No!");
        }

        afterConfirm();
        // you can also directly write code here
    });

function afterConfirm() {
    console.log("Goodbye!");
}

Answer 2

It's a common challenge in javascript event handling.

If you want to mimic a standard popup behavior, encapsulate the actions that should only occur after user input in a function. Then, call that function within the isConfirm function.

Standard popup example:

if (confirm("Are you sure?")) {
    console.log("Yes!");
}
else {
    console.log("No!");
}

console.log("Goodbye!");

Sweet Alert example:

sweetAlert({ title: "Are you sure?" },
    function(isConfirm) {
        if (confirm("Are you sure?")) {
            console.log("Yes!");
        }
        else {
            console.log("No!");
        }

        afterConfirm();
        // you can also directly write code here
    });

function afterConfirm() {
    console.log("Goodbye!");
}

The code execution continues as Sweetalert does not wait for the user's response

Answer №1

Similar questions

Exploring the globe with 3D raycasting, orbit controls, and dynamic camera rotation

Using AngularJS to make a $http GET call with an array of parameters

Getting just the outer edges of intricate BufferGeometry in Three.js

I'm curious, in which environment does SvelteKit, Next.js, and Nuxt.js code execute? Also, is it possible to create HTTP request handlers within

Use `Res.download()` to send data to the client instead of directly downloading the file

Multer can handle the uploading of various files from multiple inputs within a single form

Exploring Nested Data in MongoDB Aggregation using $match and $project

What is the optimal offset to enhance the drag effect?

Using Fabric JS to update the image source of an element with a new URL

"Transferring cart controller information to the checkout controller: techniques and best practices

Here's a guide on executing both GET and POST requests using a single form

Incorporating AngularJS into JSP for Seamless Integration

What is the best way to set conditions for document side script?

Is it possible to create a progress bar in AngularJS that features several different

Having issues updating cookies with jQuery in ASP.NET framework

Exclusive event triggered in Blazor only upon changing the page location

Send the value of a JavaScript variable to a PHP file upon calling a JavaScript function

Sending STATIC_URL to Javascript file in Django

Create a roster of individuals who responded to a particular message

Adjust Text to Perfectly Fit Button