Drop down list not populating in Modal Dialog when item in first drop down is changed

Question

I am opening a Bootstrap modal dialog when the "Edit" link in jQuery data table row is clicked. Using the "id" from one of the columns in the row, controls in modal are populated using ajax call to fetch the data from database using c# web service.

Included in this modal are two drop down lists, where the content of the second is determined by selection of an item from first. When I populate the first drop down and set its selected value, i can see that the first drop down's onchange() fires. I can also see the second drop down is populated correctly. But it seems setting the selected value of second drop down has no effect. I am not sure what i am missing.

Here is what I have:

<div class="modal fade" id="editModal" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
    <div class="modal-dialog fade in ui-draggable">
        <div class="modal-content">
            ... header stuff
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-3">
                        ....
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="ddlArea">Area</label>
                            <asp:DropDownList runat="server"
                                ID="ddlArea"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="AreaName"
                                DataValueField="AreaID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select Area" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label for="ddlDistrict">District</label>
                            <asp:DropDownList runat="server"
                                ID="ddlDistrict"
                                Enabled="false"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="DistrictName"
                                DataValueField="DistrictID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select District" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>

// When "Edit" link on a table row is clicked
function showEdit(MPOOID) {
    $('#hfMPOOID').val(MPOOID);
    $('#editModal').modal('show');    
}

$(document).ready(function () {
    $('#editModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false
    }).on('show.bs.modal', function (e) {
        var mpooID = $('#hfMPOOID').val();
        //make ajax call to populate controls
        populateMPOOEdit(mpooID);
    });
});

function populateMPOOEdit(mpooID) {
    var AreaID;
    var DistrictID;
    // Fist ajax call to populate controls, including Area drop down list and set its selected value
    $.when(
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetMPOOListByMPOOID") %>',
            cache: false,
            data: JSON.stringify({ "MPOOID": mpooID }),
        }).done(function (result) {
            jResult = JSON.parse(result.d);
            $.each(jResult, function (val, txt) {debugger
                $('#tbMgrFN').val(txt.ManagerFirstName);
                ...
                AreaID = txt.AreaID;
                DistrictID = txt.DistrictID;
                $("#ddlArea")[0].selectedIndex = 0;
                $("#ddlDistrict")[0].selectedIndex = 0;
                $("#ddlArea").val(AreaID);
                $("#ddlDistrict").prop("disabled", false);
                $('#ddlArea').change();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
        }),
        // second ajax call, populate second drop down based on selected value of first drop down
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
            cache: false,
            data: JSON.stringify({ "AreaID": areaID }),
        }).done(function (result) {debugger
            $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
            jResult = JSON.parse(result.d);
            $.each(jResult, function (val, txt) {
                $("#ddlDistrict").append($("<option></option>").val(null == txt.DistrictID ? '-1' : txt.DistrictID).html(txt.DistrictName));
            });
        }).fail(function (jqXHR, textStatus, errorThrown) {
            var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
        })).done(function (a1, a2) {
                // Set selected value of seond drop down -- does not work
                $("#ddlDistrict").val(DistrictID);
        });
}

Answer 1

This version of populateMPOOEdit function is what worked for me. As I mentioned in the question, the modal dialog, in addition to some text boxes has two drop down lists. The content of second drop down depends on selected value of first. So when populating the controls, I needed to set selected value of first drop down and then make a second ajax call to get content of second drop down, based on selected value of first, and set its selected value.

The solution was to use jQuery "when" (see jQuery API documentation ).

function populateMPOOEdit(mpooID) {
    var AreaID;
    var DistrictID;
    $.when(
        // First ajax call to get set selected value of drop down 1
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetMPOOListByMPOOID") %>',
            cache: false,
            data: JSON.stringify({ "MPOOID": mpooID }),
        }),
        // Second ajax call to get the content of second drop down
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
            cache: false,
            data: JSON.stringify({ "AreaID": areaID }),
        })).done(function (a1, a2) {
                // Now, set the values of each control
                jResult = JSON.parse(a1[0].d);
                $.each(jResult, function (val, txt) {
                    $('#tbMgrFN').val(txt.ManagerFirstName);
                    ....
                    AreaID = txt.AreaID;
                    DistrictID = txt.DistrictID;
                    $("#ddlArea")[0].selectedIndex = 0;
                    $("#ddlDistrict")[0].selectedIndex = 0;
                    $("#ddlArea").val(AreaID);
                    $("#ddlDistrict").prop("disabled", false);
                });
                // Populate second drop down
                $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
                jResult = JSON.parse(a2[0].d);
                $.each(jResult, function (val, txt) {
                    $("#ddlDistrict").append($("<option></option>").val(null == txt.DistrictID ? '-1' : txt.DistrictID).html(txt.DistrictName));
                });
                // Set second drop down's selected value
                $("#ddlDistrict").val(DistrictID);
        });
}

So, if you have to use N ajax calls, it would look like:

$.when(
    $.ajax({
        ....
    }),
    $.ajax({
        ....
    }),
    ....
    $.ajax({
        ....
    }).done(function (a1, a2, ..., aN) {
        var data1 = JSON.parse(a1[0].d);
        var data2 = JSON.parse(a2[0].d);
        ....
        var dataN = JSON.parse(aN[0].d);
        })
});