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.

Your original `success` has `alert("xx", callback())`, not `alert("xx"); callback()` - if `callback()` is inside the `alert()` brackets, it will be called before the alert is shown - try @jszobody 's answer as presented (only one callback() call) — freedomn-m, Jun 14 '16 at 14:43
Put something other than a redirect in the `callback` - eg just another `alert` (with different text). Then you'll see if it's being called and when. — freedomn-m, Jun 14 '16 at 15:29
@freedomn-m Okay, I tried putting alert("from callback") into my callback function at the top. What happened is, the other ("You are being redirected") alert function did not show up and then the redirect **still happens** while the new alert is up instead. Looks like for whatever reason the callback is executing before the alert? — vgbm, Jun 14 '16 at 15:37

jszobody · Accepted Answer · 2016-06-14T14:58:03.710

14

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.

edited Jun 14 '16 at 14:58

answered Jun 14 '16 at 14:36

jszobody

28,495
6
61
72

I tried this method and the redirect still happens before the alert is clicked. Any idea what could be wrong? – vgbm Jun 14 '16 at 14:52
You have an issue somewhere else then. Post an update to your question and show your exact code. – jszobody Jun 14 '16 at 14:55
See here: http://jsbin.com/sejosexuze/edit?js,console. That's a simple example showing quite clearly that the callback will not run until _after_ the alert is dismissed. – jszobody Jun 14 '16 at 14:57
I believe you, just not sure why it isn't working for me. – vgbm Jun 14 '16 at 15:13
@vgbm heh, I see. this isn't a javascript issue at all. your _button_ is submitting the form! – jszobody Jun 14 '16 at 15:20
According to [this answer](http://stackoverflow.com/a/2825867/5970634) you need to add `type="button"` to your ` – jszobody Jun 14 '16 at 15:22
@vgbm got it working? if you fix the button to not submit the form on its own, your javascript should just work. – jszobody Jun 14 '16 at 15:44
Yeah, that form submit definitely seems to be the issue. I just need to figure out how to place it so that it executes in the right manner. Thanks for the help – vgbm Jun 14 '16 at 15:56

score 3 · Answer 2 · answered Jun 14 '16 at 14:37

3

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();

answered Jun 14 '16 at 14:37

ADyson

57,178
14
51
63

score 2 · Answer 3 · answered Jun 14 '16 at 14:36

2

Does it not work like this?

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

answered Jun 14 '16 at 14:36

Karl-Henry Martinsson

2,770
15
25

No; I originally had the success function set up as success: function (data) { if (data.fieldIsTrue) { alert("You are being redirected"); } callback(); } – vgbm Jun 14 '16 at 14:38
Is this an answer or a question (comment)? – freedomn-m Jun 14 '16 at 14:41
@freedomn-m I should clarify: I had tried it like alert("test"); and then callback(); and then changed it to alert("test", callback()); – vgbm Jun 14 '16 at 14:47

score 1 · Answer 4 · answered Jun 14 '16 at 14:38

1

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()

answered Jun 14 '16 at 14:38

Neelesh

666
6
17

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

4 Answers4