Issue with Data returning from AJAX call showing u

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/

Answer 1

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

Answer 2

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

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

Answer 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 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>

Answer 5

I found it!

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

Answer 6

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