bootstrap multiselect not working on api json bind in Ajax call in jquery

Question

I am trying to use Bootstrap multiselect checkbox in my page. if the data to it is static, it is working fine without problem. but if i dynamically bind json data to it, the drop down is not working.

This is my HTML :

<select id="categories" ></select>

And this is loading when DOM is ready :

var categCheck  = $('#categories').multiselect({
    includeSelectAllOption: true,
     enableFiltering : true
});

Here is the API call through ajax, where i am getting data from it.

$.ajax({
    type: 'GET',
    url: '/api/categoryapi',
    success: function(data) {
        $.each(data, function (index, item) {
            var opt = $('<option />', {
                value: item._id,
                text: item.title
            });
            opt.appendTo(categCheck);
            categCheck.multiselect('refresh');
        });
    }
});

When I try to pull down the drop down box, it is not working, I couldn't find out the problem. Am I doing any mistake here ? Even I have added all supporting files which is required for multi select box in the html page.

Can anyone help me out?

Jeremy Caney · Accepted Answer · 2020-05-28 16:34:52Z

2

Instead of using 'refresh':

categCheck.multiselect('refresh');

I have tried 'rebuild':

categCheck.multiselect('rebuild');

This works fine!

edited May 28, 2020 at 16:34

Jeremy Caney

7,808115 gold badges58 silver badges86 bronze badges

answered Jan 25, 2016 at 9:42

Sri

2584 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap multiselect not working on api json bind in Ajax call in jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related