How to wait for a JQUERY AJAX response before selecting a condition

Question

$("#submit").click(function () { var boolError = false; CheckForm("#email"); CheckPhone("#phone"); if (boolError == true) { console.log('error'); } else { console.log('here'); // $("#form").submit(); } }); 

The problem is that it always returns console.log('here');

Is there a way to wait for CheckForm and CheckPhone. AJAX call to the CheckForm function:

 $.ajax({ type: "POST", url: "/webservice/user.asmx/CheckForm", data: "{'type':'" + var_type + "', 'value':'" + var_value + "'}", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (data) { var obj = data.d; } }); 

Answer 1

Try setting async to false: ( See edit below )

 $.ajax({ type: "POST", async: false, url: "/webservice/user.asmx/CheckForm", data: "{'type':'" + var_type + "', 'value':'" + var_value + "'}", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (data) { var obj = data.d; } }); 

This will block the AJAX call, so the browser will wait for it to complete before continuing. Of course, I'm still not sure how this relates to a boolean being checked in the parent conditional expression. Maybe there is a code that you don’t show us ...

---

Edit:: sigh: I was young and stupid when I posted this answer and actually forgot everything about it. I keep the above information unchanged for historical purposes (since it seems to have helped some people, or at least they think it is), but understand that this is not the right approach .

Making synchronous and blocking asynchronous calls is wrong in every way. Do not do this. Instead, structure your logic to respond to asynchronous operations. In the case of this question, console.log() calls should be executed in the success (or error) handler of the AJAX call, and not in the code after calling this call.

Answer 2

You should do this in a callback from an ajax call - like this:

 $.ajax({ type: "POST", url: "/webservice/user.asmx/CheckForm", data: "{'type':'" + var_type + "', 'value':'" + var_value + "'}", contentType: "application/json; charset=utf-8", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { console.log('error'); }, success: function (data) { console.log('here'); } }); 

Using AJAX requires non-linear programming — callbacks abound.

You can set a parameter in an ajax call that makes it not async (i.e. jQuery will wait for it to finish), but it will make your application / website go down.

Answer 3

Yes, you put a condition in a function of success.

  success: function (data) { if (...) { } else { } var obj = data.d; } 

Answer 4

where u set boolError=true ? dats why he always returns here ;

u should change the logic as follows: checkForm

 $.ajax({ type: "POST", error: function (XMLHttpRequest, textStatus, errorThrown) { boolError==true;}, success: function (data) { var obj = data.d; } });