I'm currently experimenting with using Bootstrap-select alongside HTMX partials in my Django project. When a specific element is modified, HTMX returns a partial HTML that includes only a dropdown menu, like this:
<select id="myDropdown" class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
Initially, when the main page loads with the CDNs and myDropdown, the selectpicker works perfectly. However, when myDropdown is fetched by HTMX later on, the selectpicker stops working and ends up with a display: None !important declaration. It seems like the issue arises because the CDNs are not available for use when rendering the partial HTML.
If I instead use $(function(){ $('#myDropdown').selectpicker();}); instead of class="selectpicker", it does work. The only downside is that there's a brief moment where myDropdown isn't styled before the JavaScript function is activated.
Has anyone discovered a solution to this problem or found a clever way to work around it?