snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.85k stars 2.72k forks source link

Modal reopen problem #1983

Closed mbraidy closed 6 years ago

mbraidy commented 6 years ago

I have a modal with some bootstrap-select in it. The first time I launch the modal, the dropdowns are rendered properly and I can use them. If I dismiss the modal (hide it) and reopen the modal, the dropdowns are rendered properly and then disappear after less than 1 second.

I need to refresh the whole page to get the dropdowns to work again.

Is this a modal problem? I have no problem with other plugins or code. Is this a setup problem? What should I do?

Thank you

mahmoudafer commented 6 years ago

hello, i had a similar problem where i was using vuejs for my frontend and i had some bootstrap-select elements in a modal, whenever i open another component and then get back to the previous component, the dropdowns get empty (note that I am fetching data and populating every time. So i fixed it with this function:

function select_refresh(ref, data, id, name) {
    let item_index = 1;
        $(ref).empty();
        $.each(data.data, function(index, value) {
            $(ref).append('<option value="'+ value[id] +'">' + value[name] + '</option>');
            $(ref).parent().find('div ul.inner').append(
                '<li data-original-index="'+ item_index +'">' +
                '    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">' +
                '        <span class="text">' + value[name] + '</span>' +
                '        <span class="glyphicon glyphicon-ok check-mark"></span>' +
                '    </a>' +
                '</li>'
            );
            item_index++;
        });
    $('.selectpicker').selectpicker('refresh');
}

In the parameters: ref is the reference to the dropdown like $("#select-id"). data is the data I'm fetching and populating (includes ID and Name). id and name are the name of the fields, for example if i just fetched a"supplier" object in the data.. its fields are "Supplier_ID" and "Supplier_Name".

I hope this helps

mbraidy commented 6 years ago

Thank you mahmoudafer I moved this issue to the main thread and closing this one