Bootstrap's dropdowns require Popper.js

596 Views Asked by At

I'm struggling with the imports to make a dropdown multiple selector works. I have this selector (dynamically loaded from JS):

 <div class="col-sm-4">
        <label class="control-label input-label" for="statusFilter"
               th:text="#{playerlist.filter.status}"></label>
        <select id="statusFilter" class="selectpicker" multiple="multiple"
                data-show-subtext="true" data-live-search="false" onchange="findReportsWithFilters()"
                th:title="#{playerlist.filter.status}">
        </select>
    </div>

And these imports at the end of my html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

And I don't know why I'm still getting this error even though Popper.js is imported and before bootstrap and after jQuery as needed.

Any ideas?

0

There are 0 best solutions below