JQuery Deferred & cascading select boxes

Question

On page load I'm trying to populate select boxes. The URL to hit for data for #select2 depends on the value of #select1 . As the first select box is also populated from data received from an Ajax call, I can't know in advance what the selected option will be on page load. initData() is called on body load.

I've tried the following, but in initData() selectOneValue is null when getSelectData('#select2', 'urlBase/' + selectOneValue + '/urlSuffix'); is called.

function initData() {
    initEnvs().then(function () {
        var selectOneValue= $('#select1').val();
        getSelectData('#select2', 'urlBase/' + selectOneValue + '/urlSuffix');
    });
}

function initEnvs() {
    return $.Deferred(function (def) {
        getSelectData('#select1', someUrl);
        def.resolve();
    }).promise();
}

function getSelectData(selectId, urlFragment) {
    $.ajax({
        type: "GET",
        url: "/data/" + urlFragment,
        dataType: "json",

        success: function (data) {
            appendSelectOptions(selectId, data);
        },
        error: function (xhr) {
            //handle error
        }
    });
}

What am I doing wrong here?

Answer 1

I've not tested this but this should work. Let me know if not.

function initData() {
    initEnvs().then(function () {
        var selectOneValue= $('#select1').val();
        console.log("============ 2");
        getSelectData('#select2', 'urlBase/' + selectOneValue + '/urlSuffix').then(function(data){
          console.log("Are we here?");
          appendSelectOptions('#select2', data);
        });
    });
}

function initEnvs() {
    return $.Deferred(function (def) {
        getSelectData('#select1', someUrl).then(function(data){
            console.log(data);
            console.log("============");
            appendSelectOptions('#select1', data);
        });
        def.resolve();
    }).promise();
}

function getSelectData(selectId, urlFragment) {
    return $.Deferred(function (def) {      
      $.ajax({
        type: "GET",
        url: "/data/" + urlFragment,
        dataType: "json"
    });
     def.resolve();
   }).promise();   
}

initData();