Setting selected value in Select Box after .ajax() call only works after alert

Question

If I comment out the alert('System Roles Loaded') line, no selected results will display in the $('#custom-headers') select box after the Apply button has been clicked. Code is below. Thanks in Advance.

<script type="text/javascript">    
    var userIds = @Html.Raw(Json.Encode(Model.UserIDs))
    var roleIds = @Html.Raw(Json.Encode(Model.RoleIDs)) 
    var systemId = @Html.Raw(Json.Encode(Model.SystemID)) 

    $(document).ready(function () {
        App.multiSelect();
        if (userIds != null)
        {
           xUserIds = new Array();
           for (i=0; i<userIds.length; ++i) {
               xUserIds[i] = userIds[i].toString();

           }
           $('#searchable').multiSelect('select',xUserIds);  
           $('#searchable').multiSelect('refresh');
        }

        LoadSystem(systemId);

If I comment out this alert line, no results display in select box.

        alert('System Roles Loaded'); // this is needed to display my selected select value(s)

        if (roleIds != null)
        {
            var xRoleIds = new Array();
            for(i=0;i <roleIds.length; ++i)
            {          
                xRoleIds[i] = roleIds[i].toString(); 
            }

            $('#custom-headers').multiSelect('select',xRoleIds);  
            $('#custom-headers').multiSelect('refresh');
        }                          
    });

Function called to populate the select box

    function LoadSystem(selectedItem) {
        //Remove all of the selectable items and refresh
        $("#custom-headers").children().remove();
        $("#custom-headers").multiselect('refresh'); //html template used         

        //Make the Ajax call for the selected system
        $.Ajax({
            cache: false,
            type: "GET",
            url: "/UserRoleAssignment/GetRoleBySystemId", //mvc call
            data: { "systemId": selectedItem }, //data passes to Ajax 

            done: function (data) {
                options = $('#custom-headers');
                $.each(data, function (id, option) {
                    //add each option to select
                    options.append($("<option />").val(this.option.id).text(this.option.name));
                });
            },
            //On error display this message       
            fail: function () {
                alert('Failed to retrieve roles.');              
            }
        });

    }       
</script>

score 0 · Answer 1 · edited May 23 '17 at 10:26

This should be due to the latency in completing the Ajax call.Try setting async: true in the ajax call and check it.

  $.Ajax({
        cache: false,
        type: "GET",
        url: "/UserRoleAssignment/GetRoleBySystemId", //mvc call
        async: true,
        data: { "systemId": selectedItem }, //data passes to Ajax

The alert is not making your code work but it is delaying the code after LoadSystem(systemId) and before which you ajax call is getting completed

The other solution can be including the code after LoadSystem(systemId); in the done: function (data)

done: function (data) {
            options = $('#custom-headers');
            $.each(data, function (id, option) {
                //add each option to select
                options.append($("<option />").val(this.option.id).text(this.option.name));
            });
     //code to populate roles

please refer What does "async: false" do in jQuery.ajax()?

score 0 · Answer 2 · answered Jul 06 '15 at 16:23

That usually means you're not taking into account the asynchronous nature of AJAX Calls. The Alert doesn't actually make any difference. It just means that by the time you've gotten rid of the alert window, the browser's had time to load the data in the background.

You can't put select items in the select right after the call to LoadSystem(), because the data hasn't loaded at that point.

You have to put it in a function after the AJAX has loaded, in the callback (or ideally, perhaps a differnt function that the callback function that's run on 'done' calls.

You have this:

done: function (data) {
    options = $('#custom-headers');
    $.each(data, function (id, option) {
    //add each option to select
    options.append($("<option />").val(this.option.id).text(this.option.name));
    });
},

You probably want this:

done: function (data) {
    options = $('#custom-headers');
    $.each(data, function (id, option) {
    //add each option to select
    options.append($("<option />").val(this.option.id).text(this.option.name));

    // Now you can select items in the select box
    select_items_here();
    });
},

Where select_items_here() is the function that does your role id populating thing.

Setting selected value in Select Box after .ajax() call only works after alert

2 Answers2