Bootstrap 3 dropdown doesn't work with Rails 4

2019-01-27 16:58发布

站内问答 / jQuery
1747 5 5

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?

5条回答
SAY GOODBYE
2楼-- · 2019-01-27 17:05

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

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
3楼-- · 2019-01-27 17:07

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]
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-01-27 17:20

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.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-01-27 17:22

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 
%>
查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
6楼-- · 2019-01-27 17:27

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

In short: you need the jquery-turbolinks gem.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)