CODEWITHSUNDEEP
bootstrap-multiselect
codemonkeytony
codemonkeytony

Reputation: 190

bootstrap-multiselect rebuild/refresh not working

I have 2 bootstrap-multiselect boxes. I want to refresh the items in one based on the selections made in the other via an Ajax call.

Everything work except that the that the multiselect uses to disoplay the options is not being populated by either 'rebuild' or 'refresh'.

Code:

Decalring the multiselect"

        $('#Groups').multiselect({
        onChange: function (option, checked) {
            //get all of the selected tiems
            var values = $('#Groups option:selected');
            var selected = "";
            $(values).each(function (index, value) {
                selected += $(value).prop('value') + ",";
            });
            selected = selected.substring(0, selected.length - 1);
            //update hidden field with comma delimited string for state persistance
            $("#Hidden_Groups").val(selected);
        },
        includeSelectAllOption: true
    });

Updating the options list:

$('#JobCodes').multiselect({
        onDropdownHide: function(event) {
            console.log("start");
            var option = $("#Groups");
            //clear out old consolidations
            option.empty();
            console.log("emptied");

            ////get consolidation and append to select options list
            $.getJSON("/Reports/GetGroups/", { options: $("#Hidden_JobCodes").val() }, function (result) {
                $.each(result, function (index, item) {
                    console.log(item.text);
                    option.append($("<option />").val(item.id).text(item.text));
                });
            });

            option.multiselect('destroy');
            option.multiselect('rebuild');
            option.multiselect('refresh');
        },

Have left the destroy, rebuild and refresh in just as an example things i have tried. Have used all of these in every order and combination and no luck.

Destroy will "change" my multiselect back to a standard select but no matter what I do after that I cannot get the multiselect to come back with the new list of options, including using the full multiselect call wiht the onchange event present. Its either empty of has the old list. The select list has the correct options present when I make the refresh/rebuild calls.

Thanks in advance. T

Upvotes: 2

Views: 7918

Answers (1)

codemonkeytony
codemonkeytony

Reputation: 190

Totally my fault!!

The call to /destroy/refresh/rebuild was outside of the ajax call. so the were executing before my new list had been returned, hence no list to rebuild at that time.

Solution:

 ////get consolidation and append to select options list
            $.getJSON("/Reports/GetGroups/", { options: $("#Hidden_JobCodes").val() }, function (result) {
                $.each(result, function (index, item) {
                    console.log(item.text);
                    option.append($("<option />").val(item.id).text(item.text));
                });
                option.multiselect('rebuild')
            });

Upvotes: 0

Related Questions