Выпадающий список Bootstrap 3 не работает с Rails 4 и Turbolinks

Недавно я обновил свой сайт до Bootstrap 3 и в процессе просмотра всех макетов обновил имена классов и различные функции для правильной работы. Моя последняя проблема заключается в том, что выпадающие файлы, похоже, не работают. Сначала я думал, что не правильно использовал код для своего навигационного бара, но после того, как я расстроился, я фактически попытался просто избавиться от своего навигационного бара и использовать тот, который прямо из Документация BS 3. Даже этот код не работает. Я изучил это, и я уверен, что у меня есть все необходимые библиотеки .js. Здесь моя application.js:

//= require jquery
//= require bootstrap-sprockets
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.remotipart
//= require chosen-jquery
//= require_tree .

Здесь то, что появляется в моем <head>:

  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.timepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.iframe-transport.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.remotipart.js?body=1"></script>

И у меня есть popovers и другие складные элементы на одной странице, и все работает отлично, поэтому я уверен, что все .js находятся в такте.

Я читал в другом месте, что turbolinks может создавать проблемы для Bootstrap 3, и даже попытался (а затем оставил и вернул обратно) jquery.turbolinks gem безрезультатно. Само собой разумеется, я понятия не имею, как воспроизвести это на jsfiddle (извините).

Наконец, я проверил, что следующие четыре функции js вызывается каждый раз, когда я нажимаю drop down, предположительно в следующем порядке:

jquery.js: 4306

            eventHandle = elemData.handle = function( e ) {
                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
                    jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                    undefined;
            };
            // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
            eventHandle.elem = elem;

turbolinks.js: 324

    installClickHandlerLast = function(event) {
        if (!event.defaultPrevented) {
            document.removeEventListener('click', handleClick, false);
            return document.addEventListener('click', handleClick, false);
        }
    };

tujquery.js: 4306 (снова)

turbolinks.js: 324

    handleClick = function(event) {
        var link;
        if (!event.defaultPrevented) {
            link = extractLink(event);
            if (link.nodeName === 'A' && !ignoreClick(event, link)) {
                visit(link.href);
                return event.preventDefault();
            }
        }
    };

Есть ли какая-нибудь подсказка, что может происходить здесь и как ее исправить?

Ответы

Ответ 1

Эта проблема может быть решена без использования jquery-turbolinks. Вы должны сначала понять, почему это происходит. Когда turbolinks включен и вы нажимаете на ссылку, событие page:change запускается, и весь javascript переоценивается из недавно загруженного html.

Это включает в себя код javascript bootstrap, загруженный в application.js. Когда загрузочный javascript загружается, он прерывается. Вы можете исправить это, используя data-turbolinks-eval=false в теге application.js <script>.

Для ERB:

<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>
<%= javascript_include_tag params[:controller] %>

Для SLIM:

== javascript_include_tag 'application', 'data-turbolinks-eval': false
== javascript_include_tag params[:controller]

Ответ 3

Мне удалось решить проблему, добавив к моей ссылке Bootstrap CDN "data-turbolinks-eval" = > false.

<%= javascript_include_tag 
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", 
  "data-turbolinks-eval" => false 
%>

Ответ 4

Вы не используете turbolinks - хороший способ. Турбонасосы не должны использоваться с активами. Метод использования турбонасосов можно увидеть здесь: Обработка Turbolinks и JS несовместимость в Rails

Вы не должны изменять javascript_links. Просто в App/assets/javascripts/application.js введите код вроде:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

после размещения jquery-turbolinks в Gemfile. Требование bootstrap должно находиться между jquery.turbolinks и turbolinks.