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('');
});
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('');
});
}
});
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('');
}
});
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('');