Javascript Alert function not waiting

Question

I have a Signup page where after the form's submit I send a AJAX POST. There is no problem at all except that, in the success function, I have an alert function that doesn't wait for the user input, but executes the next function immediately.

This is the SubmitHandler Function:

submitHandler: function (form) {
$("#Sign_Button").attr("disabled", "disabled");
    $.ajax({
        type: "POST",
        url: "ws/users/insert.php",
        data: $("#form_sign").serialize(),
        success: function (data) {
            $("#Sign_Button").removeAttr("disabled");
            console.log(data);
            if (data.success == 1) {
                alert("Success.");
                window.location.href='./index.php';
            }
        }
    });
}

Note: I tried with window.location.href and window.location, but in both cases it does the same thing: Popup the alert but also redirect to index.php without waiting, closing the popup alert.

NOTE: Please note that both with Alert and Confirm I have the same behaviour

what is `submitHandler`? my guess is it has nothing to do with the alert, it has to do with the fact your form is submitting.... — epascarello, Dec 03 '18 at 16:15
What user input are you expecting the `alert()` to wait for? You're calling the alert as soon as the response from the AJAX request is received. — Rory McCrossan, Dec 03 '18 at 16:19
possible duplicate of [link](https://stackoverflow.com/q/9394131/7835882) — Abhishek Kumawat, Dec 03 '18 at 16:21
@RoryMcCrossan I Deleted some code to simplify. In the real code, I do some check, and if it's all okey, I do an alert with "Thanks you, now you can log in" and I redirect the user to the login page (index.php) — JuanP. Zuniga, Dec 03 '18 at 19:01

score 1 · Accepted Answer · answered Dec 04 '18 at 13:55

As was answer in this question, you can pause the code using the alert inside of an if. This will also show only an "OK" button (instead of confirm's "yes/no"). It's important to put the ! before the alert call, as the alert function will return always undefined

this is the part of the code with the alert pausing the code:

if (data.success == 1) {
    if(!alert("Success."))
        window.location.href='./index.php';

score 0 · Answer 2 · answered Dec 03 '18 at 16:16

0

I guess you want to use the confirm dialog instead of alert.

Example usage:

if (window.confirm("Do you really want to leave?")) { 
  window.open("exit.html", "Thanks for Visiting!");
}

More info here

answered Dec 03 '18 at 16:16

ztadic91

2,774
1
15
21

Thanks but with Confirm I have the same behaviour – JuanP. Zuniga Dec 03 '18 at 18:55

score 0 · Answer 3 · answered Dec 03 '18 at 16:21

0

This is the exact behaviour that is expected. The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.

Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.

answered Dec 03 '18 at 16:21

Sibtain

1
1
1

I tested the alert outside of Ajax and It's works as it should. But when I use the code above, the alert doesn't wait – JuanP. Zuniga Dec 03 '18 at 18:58

Matt · Answer 4 · 2018-12-04T20:02:51.933

0

You would need to put the alert on the ./index.php page

Or you can use the dialog element

(function() {
  var showBtn = document.getElementById('showBtn');
  var myDialog = document.getElementById('myDialog');

  showBtn.addEventListener('click', function() {
    myDialog.showModal();
  });
})();

<dialog id="myDialog">
  <form method="dialog">
    <div>Success</div>
    <button>Ok</button>
  </form>
</dialog>
<button id="showBtn">Show</button>

edited Dec 04 '18 at 20:02

answered Dec 03 '18 at 16:24

Matt

2,096
14
20

That is actually my last resort, but I would like to show the alert in this page. – JuanP. Zuniga Dec 03 '18 at 19:04

Javascript Alert function not waiting

4 Answers4