Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

jquery - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...