How to quit parent function after AJAX response

Question

I am using an AJAX request to check if something is true or false. Here is the full function including the AJAX request:

function selectAnswer(id, questionId) {
    $.get("php/forms/select-answer-process.php?scope=get&id="+questionId, function(data) { if (data == "true") { alert("You can only select one answer per question"); } });

    var confirmChoice = confirm("Are you sure you want to select this as the correct answer? This cannot be undone.");
    if (confirmChoice) {
        $.get("php/forms/select-answer-process.php?scope=save&id="+id);
        document.getElementById("answer-check-"+id).src = "img/icons/check-green.png";
    } else {
        return false;
    }
}

The alert works great, but I want to exit the parent function if the AJAX response is true. How can I do that?

Your `ajax` call is asynchronous and as a result you cannot base anything past the async call on the returned value from ajax. You should use a callback. — Travis J, May 30 '13 at 20:48
You have to move all the logic inside the Ajax callback. If you require to return anything from the parent function, you have to make it accept a callback or use promises. See this question for more information: http://stackoverflow.com/q/14220321/218196. — Felix Kling, May 30 '13 at 20:49

score 2 · Accepted Answer · answered May 30 '13 at 20:52

As a result of ajax being asynchronous, anything after the ajax call will still execute after the ajax call is made. Instead, a callback is commonly used after the ajax returns in order to use the returned data. You should use the data returned from the ajax call in a callback like this:

function selectAnswer(id, questionId) {
 $.get("php/forms/select-answer-process.php?scope=get&id="+questionId, function(data) {
  if (data == "true") { 
   alert("You can only select one answer per question"); 
  }else{
   successResponse(id);//callback when ajax is complete
  }
 });
}

//function to be called if ajax completion is successful and correct
function successResponse(id){
 var confirmChoice = confirm("Are you sure you want to select this as the correct answer? This cannot be undone.");
 if (confirmChoice) {
    $.get("php/forms/select-answer-process.php?scope=save&id="+id);
    document.getElementById("answer-check-"+id).src = "img/icons/check-green.png";
 }
}

Matt · Answer 2 · 2013-05-30T21:11:58.917

0

You can throw an exception from inside the block and catch it in the parent, then handle it as needed:

try {
  get block... {
    if (data == "true") { 
      alert("You can only select one answer per question"); 
      throw "nope!";
    }
  }
}
catch(ex) {
  return false;
}

edited May 30 '13 at 21:11

answered May 30 '13 at 20:45

Matt

13,948
6
44
68

I did that but it still moves on to the confirm block... – Arun May 30 '13 at 20:47
`return false` is effectively `break` in jquery, and will only break out of the anonymous function. – Travis J May 30 '13 at 20:48
The `return` statement in the callback does not have any impact on the parent function. – Felix Kling May 30 '13 at 20:48
Oh of course, change the answer to a throw situation, but TravisJ has a much nicer approach above. – Matt May 30 '13 at 20:55
Throwing an exception won't help here either. – Felix Kling May 30 '13 at 21:10
Really? You can't throw an exception out of the block to the parent? – Matt May 30 '13 at 21:12
At the moment the callback is executed, the outer function already terminated. It is executed in a different context. – Felix Kling May 30 '13 at 21:24

score 0 · Answer 3 · answered May 30 '13 at 20:50

Try this:

function selectAnswer(id, questionId) {
    $.get("php/forms/select-answer-process.php?scope=get&id="+questionId, function(data) {
        if (data == "true") {
            alert("You can only select one answer per question");
            return;
        }
        var confirmChoice = confirm("Are you sure you want to select this as the correct answer? This cannot be undone.");
        if (confirmChoice) {
            $.get("php/forms/select-answer-process.php?scope=save&id="+id);
            document.getElementById("answer-check-"+id).src = "img/icons/check-green.png";
        } else {
            return false;
        }
    });
}

How to quit parent function after AJAX response

3 Answers3