Issue With Data Returning From Ajax Call Showing Up In Bootstrap Multiselect Dropdown

I am using Bootstrap Multiselect from http://davidstutz.github.io/bootstrap-multiselect/#getting-started However, my dropdown is not showing my results...or even dropping down for

Solution 1:

I tried with $("#ddlState").multiselect('refresh'); but it didn't work for me.

But when I replaced 'refresh' with 'rebuild' it works:

$("#ddlState").multiselect('rebuild');

Solution 2:

I found it!

I needed to add to my ajax call 'async: false'

Solution 3:

try adding the refresh call inside the success method:

$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {     
    $.each(data, function(i, primaryCategory) {
        $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
    });
    $("#primaryCategory-dropdown").multiselect('refresh');
},
error: function(data) {
    alert(data);
}
});

Solution 4:

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity. So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.

Hope this will help you out.

// Multiselect dropdown list related js & css files

[http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css][1] [http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js][2]

// This function should be called while loading pagevar loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselectfor (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}

// Multiselect drop down list with id parent_task
<selectid="parent_task"multiple="multiple"></select>

Solution 5:

Even if anyone is facing problem in populating the dropdown after ajax call using jquery-multiselect plugin.. Try using reload instead of "refresh" OR "rebuild"

    $('#select-id').change(function(){
    var selectedId = $('#select-id').val();
    $.ajax({
             url: 'url-to-action', //getDatafromYourMethod()type: "post",
                dataType: "json",
                data: {
                    data: 'fetchData',
                    name: selectedId                                
                },              
            crossDomain: true,
            success: function(returnData) {
                    var options = '';
                    $.each(returnData, function(key, value){
                        options +='<option value='+key+'>'+value+'</option>';
                    })
                    $('#select-ids').html(options);
                    $('#select-ids').multiselect('reload');                     
            }
    });
});