Bootstrap 3 dropdown doesn't work with Rails 4 & Turbolinks

问题

I recently upgraded my site to Bootstrap 3 and am in the process of going through all the layouts to update class names and various functionality to work correctly. My most recent problem is that drop downs don't seem to be working. At first I thought I hadn't implemented the code correctly for my nav bar, but after getting frustrated, I actually tried just getting rid of my nav bar and using the one straight out of the BS 3 documentation. Even that code doesn't work. I've looked into this, and I'm fairly certain I have all the proper .js libraries loaded. Here's my 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 .

Here's what appears in my <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>

And I have popovers and other collapsible items on the same page, and all works fine, so I'm fairly certain all the .js is in tact.

I've read elsewhere that turbolinks can create problems for Bootstrap 3, and have even tried (and then abandoned and reverted back) the jquery.turbolinks gem to no avail. Needless to say, I have no idea how to reproduce this on jsfiddle (sorry).

Finally, I've verified that the following four js functions are called every time I click a drop down, presumably in the following order:

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 (again)

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();
            }
        }
    };

Any clue what might be happening here and how to fix it?

回答1:

This issue can be resolved without using jquery-turbolinks. You need to first understand why this happens. When turbolinks is enabled and you click on a link, a page:change event is fired and all javascript is re-evaluated from the newly loaded html.

This includes the bootstrap javascript code that's loaded within application.js. When bootstrap's javascript is reloaded, it breaks. You can fix this by using data-turbolinks-eval=false in the application.js <script> tag.

For ERB:

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

For SLIM:

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

回答2:

I answered this question over at: turbolinks issues with bootstrap modal

In short: you need the jquery-turbolinks gem.

回答3:

I was able to solve the problem by adding "data-turbolinks-eval" => false to my Bootstrap CDN link.

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

回答4:

You are not using turbolinks the good way. The turbolinks should not be used with assets. The method of using turbolinks can be seen here: Handling Turbolinks and JS incompatibility in Rails

You should not change any javascript_links. Just in App/assets/javascripts/application.js put code like:

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

after putting jquery-turbolinks in Gemfile. The bootstrap require should come in between jquery.turbolinks and turbolinks.

回答5:

See this answer on twbs github: https://github.com/twbs/bootstrap-sass/issues/714

来源：https://stackoverflow.com/questions/26132384/bootstrap-3-dropdown-doesnt-work-with-rails-4-turbolinks

标签

jquery

ruby-on-rails

twitter-bootstrap

twitter-bootstrap-3

turbolinks