Question

My document.ready:

$(document).ready(function () {

     var apiKey = "58e278fc-9d57-49bb-be96-9e85b847d5b5";

     $("a#showA").click(function (e) {
         e.preventDefault();
         getHotelInfo(apiKey);
     });
});

I call JSON API to get Contract names (2 of them)

function getHotelInfo(yourAPIKey) {
var enquiry = "http://api.roomex.com/api/hotel?apiKey=" + yourAPIKey;
//alert(enquiry);
 $.ajax({
 url: enquiry,
 type: 'GET',
 dataType: "jsonp",
 jsonp: "callback",
 jsonpCallback: "jsonpCallback2",
 complete: function (response, responseCode) {
 },
 success: function (json) {
       $.each(json.Contracts, function (index, contract) {
         getAvailability(yourAPIKey, contract.ContractCode, startDate, endDate);
         getRates(yourAPIKey, contract.ContractCode, startDate, endDate);
         //alert(contract.ContractCode + " - done ");
       });
     }
 });
 }

Both functions: getAvailability and getRates – should run twice. It works with little delay (if i put that alert) The problem happends when I remove that alert.

Here are those 2 functions and third one – to populate results/

function populateValues(Type, Contractname, RoomType, Date, val) {
$("input#" + Type + "_IE-ORK-IN-32966275_" + Contractname + "_" + RoomType + "_" + Date).val(val);
// alert("input#" + Type + "_" + Contractname + "_" + RoomType + "_" + Date + " -> " + val);
}

function getRates(yourAPIKey, contractCode, startDate, endDate) {
 var ratesEnquiry = "http://api.roomex.com/api/rate?apiKey=" + yourAPIKey + "&contractCode=" + contractCode + "&startDate=" + startDate + "&endDate=" + endDate;

 $.ajax({   
     url: ratesEnquiry,
     type: 'GET',
     dataType: "jsonp",
     jsonp: "callback",
     jsonpCallback: "jsonpCallback3",
     complete: function (response, responseCode) {
         //console.log(response); console.log(responseCode);
         //alert("complete");           
     },
     success: function (json) {
         $.each(json, function (index, value) {
             populateValues("rate", this.ContractCode, this.RoomTypeCode, this.Date.substr(0, 10), this.RoomPrice);
             populateValues("hrate", this.ContractCode, this.RoomTypeCode, this.Date.substr(0, 10), this.RoomPrice);                 
         });
     }, 
 });
}



function getAvailability(yourAPIKey, contractCode, startDate, endDate) {
var availabilityEnquiry = "http://api.roomex.com/api/availability?apiKey=" + yourAPIKey + "&contractCode=" + contractCode + "&startDate=" + startDate + "&endDate=" + endDate;
$.ajax({
    url: availabilityEnquiry,
    type: 'GET',
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "jsonpCallback",
    complete: function (json, responseCode) {
        //console.log(response); console.log(responseCode);
        //alert("complete");           
    },
    success: function (json) {
        $.each(json, function (index, value) {
            //populateAvailability(this.Date.substr(0, 10), this.RoomTypeCode, this.ContractCode, this.Quantity);
            populateValues("avail", this.ContractCode, this.RoomTypeCode, this.Date.substr(0, 10), this.Quantity);
            populateValues("havail", this.ContractCode, this.RoomTypeCode, this.Date.substr(0, 10), this.Quantity);              
        });
    }, async: false
});
}

var startDate = "2012-07-24";
var endDate = "2012-07-31";

Problem occurs because od asynchronus. But I have no clue how can I fix that. Could you guys help me please?

Answer 1

Wait when first async request is Done, then execute second and then show results.

E.g:

async_func1(async_func2(function(result){
//show results
}));

Where async_func1 firsts parameter is callback when request is done.