CODEWITHSUNDEEP
javascriptdjangobootstrap-4bootstrap-multiselecthtmx
Dnib
Dnib

Reputation: 13

Bootstrap-select not working with HTMX partials

I am trying to use Bootstrap-select with HTMX partials in Django. When a specific element is changed, htmx will return a partial html containing only the dropdown, such as:

<select id="myDropdown" class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

When loading the main page initially which contains the CDNs alongside myDropdown, selectpicker works fine. However, later when myDropdown gets returned by HTMX, selectpicker doesn't work, getting a display: None !important. This behaviour is exactly as if when rendering the partial html, the CDNs are not available for usage.

If instead of using class="selectpicker I use $(function(){ $('#myDropdown').selectpicker();}); it does work. The problem now is that there is a second where myDropdown isn't styled at all, before the JS function kicks in.

Does anyone know how to fix this problem or bypass it in a clever way?

Upvotes: 0

Views: 687

Answers (1)

Zack66
Zack66

Reputation: 11

Ran into a similar issue, resolved it by reloading bootstrap-select's selectpicker in my base.html:

htmx.on('htmx:afterSwap', function (event) {
    $('.selectpicker').selectpicker('reload');
})

Upvotes: 1

Related Questions