Getting a callback function to trigger after clicking on an alert with JQuery

Question

I have a callback function which redirects the user and I want to have it trigger after clicking "OK" on an alert window. Right now, the code looks like this:

function myFunction(callback) {
    var ajaxUrl = "url_path";
    $.ajax({
        url: ajaxUrl,
        success: function (data) {
            if (data.fieldIsTrue) {
                alert("You are being redirected", callback());
            } else {
                callback();
            }
        }
    });
}

Where the callback contains a redirect and form submission. The callback goes to a different location based on the view model fields, so the callback shouldn't be different.

The issue is that the callback in the alert is being called once the alert pops up and not when the alert is clicked away. Is there anyway I can get the alert window to stay up, either between pages or make the callback execute once the alert disappears?

Edit: Origionally, I had tried using a success function that looked like this:

success: function (data) {
            if (data.fieldIsTrue) {
                alert("You are being redirected", callback());
            }
                callback(); 
        }

So I don't think the solution is

alert();
callback();

Edit2: just tried doing the

alert();
callback();

and confirmed that the redirect still occurs before clicking on the pop up

Here is more information since the problem is somewhere else:

The function call with callback:

        $(".button").click(function (e) {
        //e.preventDefault(); doesn't seem to help
        myFunction(function () {
            if ($("#myForm").validate().form()) {
                $("button").disable();
                document.forms['myForm'].submit();
            } else {
                ValidateFields();
            }
        });  

Some of the cshtml:

@{Html.BeginForm<MyController>(x => x.FunctionWithRedirects(null), FormMethod.Post, new { id = "myForm" });}  
//some hidden fields
<button class="button myButton">Button I want to alert from</button>
@{Html.EndForm();}  

Solution: So the final working solution I have actually has the original function, however it appears that I did not have e.preventDefault() in the original button click initialization, so the form would still submit. It was an oversight on my part, and thanks to everyone who tried to help.

Solution 1

Is there anyway... make the callback execute once the alert disappears?

Yes. Just execute the callback after the alert.

alert("You are being redirected");
callback();

Simple! The alert blocks execution until the user clicks OK.

Here's a simple example showing that a callback won't run until after the alert is dismissed: http://jsbin.com/sejosexuze/edit?js,console

---

If you only want the alert to appear when data.fieldIsTrue, but you want the callback executed regardless, this should work for you:

if (data.fieldIsTrue) {
    alert("You are being redirected");
}

callback();

---

Is there anyway I can get the alert window to stay up... between pages

No, you can't have a javascript alert stay visible during/after a location change.

Solution 2

If you just place the call to the callback function on the next line after the alert, then execution of Javascript will be paused until the user clicks on OK:

alert("You are being redirected");
callback();

Solution 3

Does it not work like this?

alert("You are being redirected");
callback();

Solution 4

I think what you need is this :

if (window.confirm('You are being redirected ?'))
{
    callback()
}
else
{
    // They clicked no do something else.
}

But if you want to use alert use this:

alert("You are being redirected")
callback()

View more solutions