How to prevent asynchronous in ajax using JQuery

Question

I can't explain my questions in word, i'll post my code. Then, try to explain it there.

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also.
$.ajax({
 type:"GET",
 url: "phpfunction.php?getFromTo=all",
 dataType:"json",
 success: function(data){
 $('#slctfrom').find('option').remove().end();
 $('#slctto').find('option').remove().end();
 $('#slctyr').find('option').remove().end();
 $.each(data, function(index, item) {
 if (item.dt != "") {
 $('#slctfrom').append('<option value='+item.dt+'>'+item.dt+'</option>');
 $('#slctto').append('<option value='+item.dt+'>'+item.dt+'</option>');
 $('#slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>');
 }
 });
 }
});
var fyy = document.getElementById("slctfrom").value;
var tyy = document.getElementById("slctto").value;
var yr = document.getElementById("slctyr").value;
var type = document.getElementById("slcttype").value;
var graph;
if (document.getElementById("column").checked) {
 graph = "column";
} else if (document.getElementById("line").checked) {
 graph = "line";
} else if (document.getElementById("area").checked) {
 graph = "area";
} else {
 graph = "pie";
}
if (tyy < fyy) {
 document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value.";
} else {
 chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART.
}
});

I want to execute my ajax first and then it executes my onchange because sometimes my options get null, and then if I try to change the checked in radiobutton which is #bdo not included in my code since it is the same as #all, it will be nulled forever, it doesn't get the new value

• Willie Cheng: backend didn't sent messages out if your item is null

Answer 1

Put your code in the success/error callback.

$('#all').on('change', function() { //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also.
 $.ajax({
 type: "GET",
 url: "phpfunction.php?getFromTo=all",
 dataType: "json",
 success: function(data) {
 ajaxCallback();
 $('#slctfrom').find('option').remove().end();
 $('#slctto').find('option').remove().end();
 $('#slctyr').find('option').remove().end();
 $.each(data, function(index, item) {
 if (item.dt != "") {
 $('#slctfrom').append('<option value=' + item.dt + '>' + item.dt + '</option>');
 $('#slctto').append('<option value=' + item.dt + '>' + item.dt + '</option>');
 $('#slctyr').append('<option value=' + item.dt + '>' + item.dt + '</option>');
 }
 });
 },
 error: function() {
 ajaxCallback();
 }
 });
 function ajaxCallback() {
 var fyy = document.getElementById("slctfrom").value;
 var tyy = document.getElementById("slctto").value;
 var yr = document.getElementById("slctyr").value;
 var type = document.getElementById("slcttype").value;
 var graph;
 if (document.getElementById("column").checked) {
 graph = "column";
 } else if (document.getElementById("line").checked) {
 graph = "line";
 } else if (document.getElementById("area").checked) {
 graph = "area";
 } else {
 graph = "pie";
 }
 if (tyy < fyy) {
 document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value.";
 } else {
 chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART.
 }
 }
});

• Al bassam: Sorry it worked, but i put the ajaxCallback() after $.each().. thank you sir.

Answer 2

Use async:false as an option in the Ajax call

• cgatian: Synchronous ajax requests are being deprecated. This is not a good answer.
• Al bassam: Sir, it worked but I'm getting an error in my console.log. The error is : Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org. What does this mean?
• Vince: I'd say it's a correct answer to the question asked by the OP, but the deprecation should be explained: xhr.spec.whatwg.org/#sync-warning
• Al bassam: Is it safe to use async:false?
• Seshu Kumar Alluvada: The problem with async:false is that your ui will freeze until a response is received or the request times out.

Answer 3

I think you can put the ajax call to jQuery's ready event. because the url always the same. And use $.getJSON for short.

And if the ajax call is long, you can add loading mask to prevent use fire the change event.

$(function(){
 $.getJSON('phpfunction.php?getFromTo=all', function(data){
 $('#slctfrom, #slctto, #slctyr').empty();
 if(!data){
 return;
 }
 $.each(data, function(index, item){
 if (item.dt != "") {
 $('#slctfrom, #slctto, #slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>');
 } 
 });
 });
});
$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also.
 var fyy = $("#slctfrom").val(); //may be this is better
 var tyy = document.getElementById("slctto").value;
 var yr = document.getElementById("slctyr").value;
 var type = document.getElementById("slcttype").value;
 var graph;
 if (document.getElementById("column").checked) { 
 graph = "column";
 } else if (document.getElementById("line").checked) {
 graph = "line";
 } else if (document.getElementById("area").checked) {
 graph = "area";
 } else {
 graph = "pie";
 }
 if (tyy < fyy) {
 document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value.";
 } else {
 chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART.
 }
});