Rails 4 - 放置 jQuery 和引导程序的顺序是啥?

Posted

技术标签:

【中文标题】Rails 4 - 放置 jQuery 和引导程序的顺序是啥?【英文标题】:Rails 4 - which order to put jQuery and bootstrap?Rails 4 - 放置 jQuery 和引导程序的顺序是什么? 【发布时间】:2017-01-11 06:25:15 【问题描述】:

我正在尝试弄清楚如何在我的 application.js 中加载资产。

我的 application.js 中有这些必需的文件(以及其他文件)。

//= require bootstrap-sprockets
//= require jquery
//= require jquery-ui
//= require jquery_ujs

我的 gem 文件有:

gem 'jquery-rails'
gem 'jquery-ui-rails'

当 bootstrap-sprockets 在 jQuery 之前,我的 bootstrap 下拉菜单(如下)可以正常工作。

<div class="row" style="margin-top:30px">
    <div class="col-md-3 col-md-offset-8">
        <% if policy(@project).show? %>    

            <div class="btn-group">
              <button type="button" style="color: black" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                STATUS: <%= text_for_state(@project.current_state) %> <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                 <% if policy(@project).request_preapproval? %>    
                    <%= link_to "REQUEST APPROVAL", request_preapproval_project_path(@project), method: :put, :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
                <li role="separator" class="divider"></li>
                <% if policy(@project).publish? %>    
                    <%= link_to "PUBLISH", publish_project_path(@project),  method: :put, :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
                <li role="separator" class="divider"></li>

                <!-- <a href="#" class='btn btn-primary'>REQUEST MORE INFORMATION</a> -->
                <% if policy(@project).update? %>

                    <%= link_to "EDIT PROJECT", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>

                 <li role="separator" class="divider"></li>
                <% if policy(@project).edit? %>    
                    <%= link_to "REMOVE", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
              </ul>
            </div>


        <% end %>
    </div>    
</div

但是,在这种情况下,我在以下设置中的标签显示功能不起作用。我无法单击选项卡。如果我将 jQuery 移到 bootstrap-sprockets 上方,它确实可以工作,但是原本可以工作的下拉菜单会停止工作。

<div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="dp-tab-1">
                        <ul class="dp-tab-list row" id="myTab">
                            <li class="col-md-3 col-xs-6 active" >
                                <a href="#tab-guag-content-first">
                                    <span>MOTIVATION</span>
                                </a>
                            </li>
                            <li class="col-md-3 col-xs-6">
                                <a href="#tab-guag-content-second">
                                    <span>OBJECTIVES</span>
                                </a>
                            </li>
                            <li class="col-md-3 col-xs-6">
                                <a href="#tab-guag-content-third">
                                    <span>VISION</span>
                                </a>
                            </li>

                        </ul>

                        <div class="dp-tab-content tab-content">
                            <div class="tab-pane row fade in active" id="tab-guag-content-first">

                                <div class="col-md-12">
                                    <div class="tab-inner">

                                        <p class='medium-text'>
                                            <%= @project.motivation %>
                                        </p>
                                        <br/>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane row fade" id="tab-guag-content-second">
                                <div class="col-md-12">
                                    <div class="tab-inner">
                                        <p class='medium-text'>
                                            <%= @project.objective %>
                                        </p>
                                        <br/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img class='wow fadeInUp img-responsive' src="images/iphone-mockup.png" />
                                </div>
                            </div>

                            <div class="tab-pane row fade" id="tab-guag-content-third">

                                <div class="col-md-12">
                                    <div class="tab-inner">
                                        <div class='services-content'>
                                            <strong>Long Term Research Vision</strong>
                                            <p class='medium-text'>
                                                <%= @long_term %>
                                            </p>
                                        </div>
                                        <div class='services-content'>
                                            <strong>Immediate Challenge</strong>    
                                            <p class='medium-text'>
                                                <%= @immediate_challenge %>
                                            </p>
                                        </div>    
                                        <br/>
                                        <!-- <a class='btn btn-primary'>READ MORE</a> -->
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
            <!-

当我尝试在 jQuery 之前加载引导程序的情况下呈现页面时,我在 chrome 检查器控制台选项卡中收到此错误:

main.self-9711b4c….js?body=1:56 Uncaught TypeError: dp(...).tab is not a function(anonymous function) @ main.self-9711b4c….js?body=1:56dispatch @ jquery.self-660adc5….js?body=1:5227elemData.handle @ jquery.self-660adc5….js?body=1:4879

我该如何解决这个问题,以便下拉菜单和选项卡都能正常工作?

我的整个 application.js 是:

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-sprockets
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require bootstrap-slider
//= require_tree .

下一次尝试

我已经尝试了这篇文章中的所有建议:它们都不适合我:https://github.com/twbs/bootstrap-sass/issues/714

【问题讨论】:

【参考方案1】:

完美运行。

//= require jquery
//= require jquery-ui 
//= require jquery_ujs
//= require bootstrap-sprockets

您已经在 jquery 之前定义了 bootstrap.js。但是在每个应用程序中,您都应该在顶部定义 jquery,所以它会首先加载。

【讨论】:

嗨@Prashant - 感谢您的注意。不幸的是,这不起作用。它适用于选项卡,但这意味着引导下拉菜单不起作用。 chrome 检查器控制台中没有显示任何错误,我可以在 chrome 检查器中看到下拉菜单元素,尽管应该显示下拉菜单的按钮什么也不做。菜单不起作用。但是,如果我将引导程序放在 jQuery 之上,它确实有效。如果我这样做,那么后面的 html 中的选项卡将不起作用。 您能否在网页上使用 ctrl +u 检查 js 的顺序,并检查是否存在任何冲突,即重复的 js 在您的应用程序中初始化。你可以把 //= require bootstrap-sprockets 放在 //= require jquery 嗨,普拉桑特。请你给我更多关于检查什么的细节。如何检查js的顺序?我在 Mac 上 - ctrl 你什么都不做。另外,您能否通过将引导链轮放在下方来澄清您的意思。非常感谢您的帮助 是的,我是来帮你的。我的意思是您访问应用程序的浏览器页面。所以你应该使用 ctrl + u 这样这将显示你的应用程序中包含的所有 js 和 css 以及它们的前端 html。我的第二点把 //= 要求 bootstrap-sprockets 放在 2 位置。你可以试试 remove //= require jquery-ui //= require jquery_ujs atleast once. 你能不能试试 remove //= require_tree 。在你 application.js 的底部【参考方案2】:

这对我有用:https://***.com/a/22977412/2860931 这感觉不像是一个实际的解决方案 - 而是一种解决方法。我现在就认为它已经足够好了。我已经尝试了在 SO 的各个地方发布的至少 30 种不同的解决方案。

【讨论】:

【参考方案3】:

你不见了

data-toggle="tab"

工作代码示例:

<a href="#tab-guag-content-first" data-toggle="tab">
  <span>MOTIVATION</span>
</a>
...
<a href="#tab-guag-content-second" data-toggle="tab">
  <span>OBJECTIVES</span>
</a>
...
<a href="#tab-guag-content-third" data-toggle="tab">
  <span>VISION</span>
</a>

【讨论】:

当我重新排序应用程序 js 时,一切都很好(因此引导程序低于 jQuery)。但这意味着菜单不起作用。【参考方案4】:

首先,我假设您正在使用 gems 来加载一些资产,例如 jquery-rails。我这样说是因为如果您有 require_tree . 语句,那么您的 javascripts 中的所有文件都将自动包含在内。其次,尝试将您的application.js 设置为如下所示:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require misc-stuff
 *= require jquery-stuff
 *= require bootstrap-stuff
 */

我注意到您提供的 sn-p 中没有 require_self 语句,因此这也可能与您的问题有关。

第三,你可能有一些 css 问题。

【讨论】:

我的 gem 文件中有 gem 'jquery-rails' 和 gem 'jquery-ui-rails'。你的意思是我把 require tree 和 require self 放在最顶部,然后所有引用 bootstrap 的文件都放在最底部,所有引用 jQuery 的文件都在 bootstrap 之上,而所有其他文件都在 jQuery 之上? 你能给我一个关于你能看到的css问题的线索吗? 第一个问题,是的。那应该行得通。关于你的第二个问题,我不确定。因此,为什么我说你可能有一些问题。我还注意到您有一堆自定义 javascript(我只能假设您也有很多自定义样式表),所以其中的某些东西可能是您的问题的原因。 另外,尝试在您的网页中先加载样式表,最后加载 javascript,看看是否有帮助。 我如何调查是什么导致了 javascripts 出现这个问题?我已尝试按照您建议的顺序放置文件。当我以这种方式尝试时,它不起作用,并且出现了其他几个问题。是否有一种策略来调查我上面概述的引导程序如何出现问题。【参考方案5】:

好的,你需要的是:

//= require jquery
//= require jquery-ui 
//= require jquery_ujs
//= require bootstrap-sprockets

现在您的标签显示功能可以正常工作而您的菜单不能正常工作,让我们也解决这个问题。

将此脚本添加到您的页面:

<script>
$('.dropdown-toggle').dropdown()
</script>

【讨论】:

以上是关于Rails 4 - 放置 jQuery 和引导程序的顺序是啥?的主要内容,如果未能解决你的问题,请参考以下文章

带有引导程序 3.3.4 的字形图标在 rails 4.2.1 中不起作用

rails timelinejs 未在引导选项卡中正确加载

Bootstrap(和 jquery)、webpack、rails - 没有完全集成

在 Rails 4.1 中将页面特定的 jQuery 代码放在哪里?

Rails 的脚手架 - 引导应用程序

best_in_place nil 和编辑功能在带有引导应用程序的 rails4 上不起作用