Set variables in JavaScript once function finishes

Question

I have two functions that makes Ajax calls: getData and getMoreData. getMoreData requires a url variable that is dependent on the url variable getData. This questions continues from: String append from <select> to form new variable .

By appending an item obtained from the received from getData onto a base URL, I create a new variable (Let's call this NewDimensionURL) that I use for getMoreData url. However, NewDimensionURL will show error because the original list (from getData) has yet to be populated and will append nothing onto the base URL.

An idea that I have is to set NewDimensionalURL once getData finishes populating the combobox, so that getMoreData can run after.

---

JavaScript

var GetDimensions = 'SomeURL1';

//--Combines URL of GetDimensionValues with #dimensionName (the select ID)
var UrlBase = "Required URL of getMoreData";
var getElement = document.getElementById("dimensionName");
var GetDimensionValues = UrlBase + getElement.options[getElement.selectedIndex].text;


function handleResults(responseObj) {
        $("#dimensionName").html(responseObj.DimensionListItem.map(function(item) {
                return $('<option>').text(item.dimensionDisplayName)[0];
    }));
}

function handleMoreResults (responseObj) {
    $("#dimensionId").html(responseObj.DimensionValueListItem.map(function(item) {
        return $('<option>').text(item.dimensionValueDisplayName)[0];
    }));
}

function getData() {
    debugger;
    jQuery.ajax({
        url: GetDimensions,
        type: "GET",
        dataType: "json",
        async: false,
        success: function (data) {
                    object = data;
        handleResults(data);
    }
});
}

function getMoreData() {
    debugger;
jQuery.ajax({
    url: GetDimensionValues,
    type: "GET",
    dataType: "json",
    async: false,
    success: function (data) {
        object = data;
        handleMoreResults (data);
    }
});
}

---

Answered

Reordered as:

var GetDimensionValues;


function handleResults(responseObj) {
    $("#dimensionName").html(responseObj.DimensionListItem.map(function(item) {
        return $('<option>').text(item.dimensionDisplayName)[0];
    }));
    GetDimensionValues = UrlBase + getElement.options[getElement.selectedIndex].text;
}

Created onchange function Repopulate() for getMoreData() to parse and for handleMoreResults() to populate.

Answer 1

I'm guessing you just do getData(); getMoreData() getData(); getMoreData() back to back? If so, then you're running getmoreData BEFORE getData has ever gotten a response back from the server.

You'll have to chain the functions, so that getMoreData only gets executed when getData gets a response. eg

$.ajax($url, {
   success: function(data) {
        getMoreData(); // call this when the original ajax call gets a response.
   }
});

Answer 2

Without seeing your code it's hard to say if this is the right solution, but you should try chaining the functions:

$.ajax({url: yourUrl}).then(function (data) {
  // deal with the response, do another ajax call here
}).then(function () {
  // or do something here
});