I have a page with several different forms on which people can insert their zipcode and housenumber. After an onblur
on these input field I make an ajax call to get the streetname and city from the server based on the zipcode and housenumber.
function getAddress(postcode, streetnum, form, tr) {
$.ajax({
type: "GET",
url: "some url with streetnumber and zipcode",
dataType: "json",
success: function(data){
var street = $("input.formstreet", tr);
var city = $("input.formcity", tr);
street.val(data.data[0].streetname);
city.val(data.data[0].city);
tr.css("visibility","visible");
switch(tr.get(0).nodeName.toLowerCase()){
case "tr":
tr.css('display','table-row');
break;
case "tbody":
tr.css('display','table-row-group');
break;
default:
tr.css('display','block');
};
}
});
}
This works as it should, however if the page gets reloaded and the field are already filled in the address needs to get reloaded from the server.
$("#thing").keyup(function(){
completeAddress1();
});
completeAddress1();
$("#something").keyup(function(){
completeAddress2();
});
completeAddress2();
$("#something else").keyup(function(){
completeAddress3();
});
completeAddress3();
$("#some other thing").keyup(function(){
completeAddress4();
});
completeAddress4();
The completeAddress()
functions just check whether a ajax call is needed, if so it calls getAddress.
So... to the actual problem... At pageload several ajax calls are made, and only the last one called returns(I checked with fiddler), now I get why only one returns but what can I do about it...