Question

I have an $.ajax() function that requests something with a string location.

Assume result.location = “Somewhere” on the ajax response, but theoretically it could be any string.

On success(result) it does:

Line 1: alert("Hello There");
Line 2: alert("Look Here" + result.location); // Look here Somewhere

What happens is an alert box for “Hello There” pops up and “Look here” alert box is not shown until AFTER the user closes the “Hello There” alert box.

However, if for Line 1 instead of an alert I have a div instead of an alert box that shows up for example:

<div>Hello There <input type="button">OK</input></div>

So instead I have:

Line 1: showDivAlert();
Line 2: alert("Look Here" + result.location); // Look here Somewhere

Then what happens is the div shows up and the alert “Look Here” pops up. What could I put in function “showDivAlert()” such that any code below showDivAlert() will not get executed until the user clicks the “OK” button?

NOTE: key here is to preserve the result.location string of the ajax request

Answer 1

Change your HTML so that you have:

<div>Hello There <input type="button" id="alert-ok">OK</input></div>

Now you can target the button through the #alert-ok id.

If you’re using jQuery, just attach an event:

showDivAlert();
$("#alert-ok").click(function() {
    //do work
});