jquery - How to check AJAX call is completed -

i have page have bind few controls via ajax call. country drop down, state drop down on basis of selected country, city drop down on basis of selected city. nested data binding working fine.

but if have initial values of country, state, city & have set selected values, not working. calling function set initial values below:

function bindandsetvalues(_country, _state, _city){    // function bind countries via ajax call. ajax logic inside function   bindcountries();    if($("#country").length > 0){     // set selected country     $("#country").val(_country);      // function bind states via ajax call. ajax logic inside function     bindstates(_country);      if($("#state").length > 0){       // set selected state       $("#state").val(_state);     }   } } 

but country drop down populated. neither initial value of country sets nor state drop down binds.

i have found reason. after calling bindcountries() function, control goes bindcountries() function. there asynchronous ajax call inside bindcountries() function, after calling ajax call, control gets caller function without waiting completion of ajax call called

$("#country").val(_country);

but because ajax async call still in progress & country drop down bind & render after completing ajax call.

so, neither initial value of country sets nor state drop down binds. so, question is: there way check or wait completion of ajax async call, check existence of rendered control ($("#state").length > 0) after that time/completing ajax call.

i know there .done, .fail & .always methods of jquery ajax can handle post ajax call logic. in above case, can't use methods. & there more 8 type of nested controls have set.

please suggest me solution.

you can use .done()

$.ajax({   url: "url",   context: document.body }).done(function() {   //write code here });