Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown

Question

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 that matter. Not sure if it makes any difference, but I am using this in a Modal and I am using this along side AngularJS.

This is all I should have to put on my HTML page (according to the website above):

<select id="primaryCategory-dropdown" multiple="multiple"></select>

I am making the following AJAX call to my service:

function loadPrimaryCategories() {

    $.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>');
            });
        },
        error: function(data) {
            alert(data);
        }
    });
}

I am getting results back(I have 57 to be exact):

<option value="1">2004 Examination

<option value="2">341 Meeting

<option value="3">Abandonment

But the button does not open to show my results. It will enable and disable when I click on it. You can also see a scroll list box appear with all the values when I change the style='display: block'. It almost seems like it isn't binding properly.

I am following the same instructions as this example, but once I implement it into my solution it doesn't work: https://jsfiddle.net/3p3ymwwc/

I don't see any angular code, or attempt to use binding here... It looks like you are just directly writing option tags inside the select.... — pquest, Mar 03 '15 at 17:35

score 3 · Answer 1 · edited May 12 '15 at 12:23

3

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');

edited May 12 '15 at 12:23

legoscia

39,593
22
116
167

answered May 12 '15 at 11:53

Jainprakash

31
2

score 2 · Answer 2 · answered Mar 03 '15 at 19:09

2

I found it!

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

answered Mar 03 '15 at 19:09

tania_s

207
1
5
13

score 1 · Answer 3 · answered Mar 03 '15 at 17:39

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

score 0 · Answer 4 · answered Aug 18 '16 at 11:20

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 page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (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
<select id="parent_task" multiple="multiple">
</select>

score 0 · Answer 5 · answered Jun 01 '18 at 09:46

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

score 0 · Answer 6 · answered May 02 '21 at 06:42

idk why your code isn't being rendered properly, but do give this a try. Instead of appending one by one , store that html data as a string in variable and then once you have finsihed iterating over all the items, append them at once. Try putting this in inside your success: function(data)

let htmldata=""
$.each(data, function(i, primaryCategory) {
             htmldata+=   '<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>';
            }); 
$("#primaryCategory-dropdown").html(htmldata);
    
},

VINOTH · Answer 7 · 2015-03-17T05:06:47.210

TRY THIS,100% YOU WILL GET EXPECTED OUTPUT

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script src="bootstrap-2.3.2.min.js" type="text/javascript"></script>

<script src="bootstrap-multiselect.js" type="text/javascript"></script> 


<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: "{}",
            url: "multiselect.aspx/BindStates",
            dataType: "json",
            async: false,
            success: function(data) {
                var select = $("#ddlState");

                select.children().remove();
                if (data.d) {
                    $(data.d).each(function(key,value) {
                      $("#ddlState").append($("<option></option>").val(value.State_id).html(value.State_name));                      
                    });                    
                }
             $('#ddlState').multiselect({includeSelectAllOption: true});
             $("#ddlState").multiselect('refresh');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });
    });
</script>

    <center>
        <select id="ddlState" name="ddlState" multiple="multiple">
        </select>

    </center>
</div>

include this css in top

Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown

7 Answers7

Linked