locked
How can I call one function after another function . RRS feed

  • 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);
            }
        });
    }

    Monday, August 3, 2020 2:32 PM

Answers

  • User-474980206 posted

    just call as the last statement in the success of the first:

        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();
                }
                FillEmployeeDropdown();
            },
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 3, 2020 3:06 PM