locked
How can call a function after executing another function in html for cascading dropdown RRS feed

  • Question

  • User-1355965324 posted

    Hi

    I am calling two function  for cascading dropdown Department and its corresponding employee.

    1. In Depot Select change  , I am calling FillLocationsDropdown(), FillEmployeeDropdownatt(). It means When I change the depot, FillLocationsDropdown() function should be called first, then FillEmployeeDropdownatt() function  being called after. 
    2. In Department Select change - I am calling FillEmployeeDropdownatt() function to get the corresponding Employee of the  selected Depot and Department. 

    I have  Depots

    Depot 1 - Admin, Sales

    Depot 2 - Admin, WareHouse

    All select list are multiple select 

    If  I select Depot1 ,  select Department Admin , Then All the Employees being showed for the Depot1 and Admin Department

    . But If I Select  Depot 2 along with Depot1, for the same department Admin, The Depot2 Employees is not being showed in the select list. Still only being showed Depot1.

    I tried to call FillLocationsDropdown();FillEmployeeDropdownatt(). But  it not working.  It is being called as inline call, The FillEmployeeDropdownatt() must be alled  after calling FillLocation.

    How can I fix that. Here is my code

     <div class="row col-sm-12">
                            <div class="row col-sm-8">
                                <div class="form-group">
                                    <label class="control-label control-label-left col-sm-2" for="field2"> Depot</label>
                                    <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                        <select id="dropdownDepot" class="form-control" multiple asp-for="Depot" onchange=" FillLocationsDropdown()" asp-items="@ViewBag.UserDepots" data-role="select"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8 row">
                                <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="FillEmployeeDropdownatt()" asp-items="@ViewBag.UserDepartments" data-role="select"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8 row">
                                <div class="form-group">
                                    <label class="control-label control-label-left col-sm-2"> Employee</label>
                                    <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                        <select id="dropdownEmployee" multiple class="form-control" asp-for="Employee" asp-items="@ViewBag.Employees" data-role="select"></select>
                                    </div>
                                </div>
                            </div>
    
                        </div>
                    </div>

    Function

    function FillLocationsDropdown() {
        alert("ka");
        var depot = $('#dropdownDepot option:selected');
        var depots = "";
        $(depot).each(function (index, brand) {
            depots = depots + $(this).val() + ",";
        });
        if (depots == "") {
            $('#dropdownEmployee').empty();
            $('#dropdownEmployee').multiselect('reload');
            $('#dropdownDepartment').empty();
            $('#dropdownEmployee').multiselect('reload');
        }
        else {
            $.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) {
                             
                            opt = document.createElement('option');
                            Names.options.add(opt);
                            opt.text = data[i].text;
                            opt.value = data[i].value;
                            if (data[i].selected) {
                                opt.setAttribute('selected', 'selected');
                            }
                             
                        });
    
                        $('#dropdownDepartment').multiselect('reload');
    
                    }
                    else {
                        $('#dropdownDepartment').empty();
    
                        $('#dropdownDepartment').multiselect('reload');
                        $('#dropdownEmployee').empty();
                        $('#dropdownEmployee').multiselect('reload');
                    }
                },
                failure: function (response) {
                    console.log(response.responseText);
                },
                error: function (response) {
                    console.log(response.responseText);
                }
            });
        }
    }
    
    
    function FillEmployeeDropdownatt() {
        console.log("tets");
        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);
            }
        });
    }
    

    Tuesday, August 25, 2020 9:10 AM

All replies

  • User-1330468790 posted

    Hi polachan,

     

    I tried to reproduce the problem however failed because I cannot identifier which kind/version of the multiselect widget you are using. 

    Could you please provide the cdn links or anything pointing to the download site?

     

    I tried to call FillLocationsDropdown();FillEmployeeDropdownatt(). But  it not working.  It is being called as inline call, The FillEmployeeDropdownatt() must be alled  after calling FillLocation.

    How can I fix that. Here is my code

    It is not working since the ajax call works in async behaviour which means that the nested function will be executed asynchronously with the second function "FillEmployeeDropdownatt()".

    If you expects the two functions works in an inline order, you should better call the second function in the callback function of the ajax call.

    Another option is to use a suitable event which will trigger the second function automatically and reload the data again.

     

    Best regards,

    Sean

    According to your description, there is one problem located in choosing event. 

    Wednesday, August 26, 2020 7:39 AM
  • User-1355965324 posted

    Please can you advise a suggested code to solve 

    Friday, August 28, 2020 9:01 AM
  • User-1330468790 posted

    Hi polachan,

     

    Could you please specify the version of the multiselect plugin? Either CDN link or detailed version information is enough.

    That way, I could try my best to make it working as your original codes.

     

    Best regards,

    Sean

    Wednesday, September 2, 2020 6:17 AM
  • User-474980206 posted

    Just call the second drop down code at the end of the of the success code in the first.

    Wednesday, September 2, 2020 2:47 PM