bootstrap-select: Duplicate selectpicker with turbolinks

Using turbolinks 5, I am observing duplicate pickers when playing with the browser history

selectpicker

I am using a global $('.selectpicker').selectpicker('refresh');

The pickers are actually nesting into each other

<div class="btn-group bootstrap-select caret">
    <button class="btn dropdown-toggle btn-default" data-toggle="dropdown" type="button" data-id="sort_type" title="Trier par pertinence" aria-expanded="false">
        <div class="dropdown-menu open">
            <div class="btn-group bootstrap-select caret">
                <button class="btn dropdown-toggle btn-default" data-toggle="dropdown" type="button" data-id="sort_type" title="Trier par pertinence" aria-expanded="false">
                    <div class="dropdown-menu open">
                        <div class="btn-group bootstrap-select caret">
                            <button class="btn dropdown-toggle btn-default" data-toggle="dropdown" type="button" data-id="sort_type" title="Trier par pertinence" aria-expanded="false">
                                <div class="dropdown-menu open">
                                    <div class="btn-group bootstrap-select caret">
                                        <button class="btn dropdown-toggle btn-default" data-toggle="dropdown" type="button" data-id="sort_type" title="Trier par pertinence">
                                            <div class="dropdown-menu open">
                                                <select id="sort_type" class="caret selectpicker" name="sort_type" tabindex="-98">

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 17

Most upvoted comments

My solution:

document.addEventListener 'turbolinks:load',  ->
  $(".selectpicker").selectpicker()

document.addEventListener 'turbolinks:before-cache',  ->
  $('.selectpicker').selectpicker('destroy').addClass('selectpicker')

+45

jimhj on Jul 12, 2016

2019 and no fix for this?

jingaworks on Mar 14, 2019

I was able to get around this altogether by invoking the plugin this way:

$(document).on('turbolinks:load', function() {
   $(this).trigger('load.bs.select.data-api');
});

This preserves the auto-initialization behavior described in the README:

If you use a 1.6.3 or newer, you don’t need to do anything else, as the data-api automatically picks up the <select>s with the selectpicker class.

MaffooClock on Nov 11, 2016

OK, found a temporary(?) solution to this problem, needed to replace the contents of .bootstrap-select with .selectpicker then re-initialise selectpicker:

var remove = $('.bootstrap-select');
$(remove).replaceWith($(remove).contents('.selectpicker'));
$('.selectpicker').selectpicker();

https://github.com/aperkins81/turbolinks-5-selectpicker/commit/9385f447ac37874b0532d35deb575d089a11f5c5

aperkins81 on Jun 28, 2016

A simple fix will just select the selectpickers which do not have the bootstrap-select class as direct parent

$('*:not(.bootstrap-select) > .selectpicker').selectpicker('refresh');

Startouf on Jun 11, 2016