Async:False not working

Question

I am using async:false. Therefore in case of success function, it should wait till it gets a response from the function and should stop executing the code that follows the success function.

However it executes the code following it. Shouldn't async lock the process? Now in mycase, I am making $('#val1loading').text('loading') which has to keep showing loading until it gets a success from the ajax call. But it doesn't.

$("#val").change(function() {
$('#val1loading').text('loading');
if ($('#val').val() != '') {
 $.ajax({
 url: "Functions.php",
 dataType: 'json',
 data: {
 async: false,
 'link': $('#val').val()
 },
 success: function(result) {
 $("#val1").val(result[0]);
 },
 error: function(xhr, status, error) {
 $("#val1").val('');
 }
 });
} else {
 //some code
}
$('#val1loading').text('');

});

• Rajshekar Reddy: You can place the $('#val1loading').text(''); inside success right
• n4m31ess_c0d3r: isn't async: false, supposed to be outside of the data ?

Answer 1

The async: false should be in the main object passed to $.ajax, not contained within the data sub-object.

That said, using synchronous AJAX is almost always a bad idea precisely because it does "lock the process" as you mentioned in the question.

Get used to writing properly async code, where every action in the program happens via callbacks as a result of events (e.g. AJAX completion) or better yet use "Promises", e.g.:

$('#val').on('change', function() {
 var $val1 = $('#val1');
 var $loading = $('#val1loading');
 var val = this.value.trim();
 if (val.length > 0) {
 $loading.text('loading');
 $.ajax({
 url: "Functions.php",
 dataType: 'json',
 data: { link: val },
 }).then(function(result) {
 $val1.val(result[0]);
 }).fail(function(xhr, status, error) {
 $val1.val('');
 }).always(function() {
 $loading.text('');
 });
 }
});

• Ram Malhotra: So could u suggest a solution?
• Alnitak: @RamMalhotra I did, for your immediate problem. If you want to use async properly, there's thousands of other questions already here relating to that.

Answer 2

async is deprecated.Inorder to solve your problem use $('#val1loading').text('') in all the cases.

$("#val").change(function(){
$('#val1loading').text('loading');
if($('#val').val() != '') {
 $.ajax({
 url: "ajaxFunctions.php",
 dataType: 'json',
 data: {'update': 'parser','link': $('#val').val()},
 success: function (result) {
 $('#val1loading').text('');
 $("#val1").val(result[0]);
 },
 error: function(xhr, status, error) {
 $("#val1").val('');
 $('#val1loading').text('');
}
 });
 }else
{
 //some code
}
//$('#val1loading').text('');

• Alnitak: async: false is not deprecated - however you can't mix it with Promises / Deferred. It's still a bad idea, though.
• coder: @Alnitak As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().So I have written.
• Alnitak: and 1. not removed async: false from the data object, 2. repeated chunks of code that should have gone into a complete: handler (which is called regardless of success or error)

Answer 3

i think dont use async false like this. change it to :

 $.ajax({
 url: "Functions.php",
 dataType: 'json',
 data: {'link': $('#val').val()},
 async:false,
 success: function (result) {
 $("#val1").val(result[0]);
 },
 error: function(xhr, status, error) {
 $("#val1").val('');
 }
 });