Drop Down List Not Populating In Modal Dialog When Item In First Drop Down Is Changed

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 u

Solution 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).

functionpopulateMPOOEdit(mpooID) {
    varAreaID;
    varDistrictID;
    $.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);
        })
});