How can I call one function after another function .

Question

User-1355965324 posted

I am calling the two function from  html  on the change of dropdownDepot. But  now it is being  asynchronously called. I want  to call the function FillEmployeeDropdown after calling the FillLocationsDropdown(). Please help

HTML

 <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                    <select id="dropdownDepot" class="form-control" multiple asp-for="Depot" onchange=" FillLocationsDropdown();"FillEmployeeDropdown() " asp-items="@ViewBag.UserDepots" data-role="select"></select>
                                </div>
<div class="form-group">
                                <label class="control-label control-label-left col-sm-2" for="field2"> Department</label>
                                <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                    <select id="dropdownDepartment" multiple class="form-control" asp-for="Department" onchange="FillEmployeeDropdown()" asp-items="@ViewBag.UserDepartments" data-role="select"></select>
                                </div>
                            </div>

Javascript function

function FillLocationsDropdown() {
    var depot = $('#dropdownDepot option:selected');
    var depots = "";
    $(depot).each(function (index, brand) {
        depots = depots + $(this).val() + ",";
    });

    $.ajax({
        type: "GET",
        url: "/User/GetUserDepotLocations?depots=" + depots,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // var data = JSON.parse(response);
            $('#dropdownDepartment').empty();
            var Names = document.getElementById('dropdownDepartment');
            Names.length = 0;
            if (data.length > 0) {
                $.each(data, function (i) {
                    //if (data[i].value == '-1') {
                    //    window.location.href = "@Url.Action("Dashboard", "Home")";
                    //}
                    opt = document.createElement('option');
                    Names.options.add(opt);
                    opt.text = data[i].text;
                    opt.value = data[i].value;
                });

                $('#dropdownDepartment').multiselect('reload');
            }
            else {
                $('#dropdownDepartment').empty();
            }
        },
        failure: function (response) {
            console.log(response.responseText);
        },
        error: function (response) {
            console.log(response.responseText);
        }
    });
}


function FillEmployeeDropdown() {
    var depot = $('#dropdownDepot option:selected');
    var depots = "";
    $(depot).each(function (index, brand) {
        depots = depots + $(this).val() + ",";
    });
    var department = $('#dropdownDepartment option:selected');
    var departments = "";
    $(department).each(function (index, brand) {
        departments = departments + $(this).val() + ",";
    });
    $.ajax({
        type: "GET",
        url: "/User/GetEmployeeByUserDepotLocation?depots=" + depots + "&departments=" + departments,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // var data = JSON.parse(response);
            $('#dropdownEmployee').empty();
            var Names = document.getElementById('dropdownEmployee');
            Names.length = 0;
            if (data.length > 0) {
                $.each(data, function (i) {
                    //if (data[i].value == '-1') {
                    //    window.location.href = "@Url.Action("Dashboard", "Home")";
                    //}
                    opt = document.createElement('option');
                    Names.options.add(opt);
                    opt.text = data[i].text;
                    opt.value = data[i].value;
                });

                $('#dropdownEmployee').multiselect('reload');

            }
            else {
                $('#dropdownEmployee').empty();
            }
        },
        failure: function (response) {
            console.log(response.responseText);
        },
        error: function (response) {
            console.log(response.responseText);
        }
    });
}