Javascript无法在rails中的bootstrap模板中运行
我创建了一个新的rails应用程序并安装了所有必需的gem。 添加了所有文件。 更新了application.js文件。 一切正常但由于某种原因所有与javascript相关的东西都不起作用。 我正在使用这个模板：
https://startbootstrap.com/template-overviews/creative/
我也使用部分导航栏。 我错过了什么？ 如果您需要更多信息，请告诉我们！
app / assets / javascripts / application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery-ui //= require magnific-popup //= require welcomes //= require jquery.easing //= require scrollReveal //= require jquery_ujs //= require turbolinks //= require_tree . 的Gemfile
source 'https://rubygems.org' gem 'jquery-ui-rails' gem 'scrollreveal-rails' gem 'magnific-popup-rails', '~> 1.1.0' gem 'jquery-easing-rails' gem "font-awesome-rails" gem 'bootstrap-sass' gem 'rails', '4.2.0' gem 'sqlite3' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.1.0' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 2.0' gem 'sdoc', '~> 0.4.0', group: :doc group :development, :test do gem 'byebug' gem 'web-console', '~> 2.0' gem 'spring' end
app / assets / javascripts / welcomes.js
(function($) { "use strict"; // Start of use strict // jQuery for page scrolling feature - requires jQuery Easing plugin $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top - 50) }, 1250, 'easeInOutExpo'); event.preventDefault(); }); // Highlight the top nav as scrolling occurs $('body').scrollspy({ target: '.navbar-fixed-top', offset: 51 }); // Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); }); // Offset for Main Navigation $('#mainNav').affix({ offset: { top: 100 } }) // Initialize and Configure Scroll Reveal Animation window.sr = ScrollReveal(); sr.reveal('.sr-icons', { duration: 600, scale: 0.3, distance: '0px' }, 200); sr.reveal('.sr-button', { duration: 1000, delay: 200 }); sr.reveal('.sr-contact', { duration: 600, scale: 0.3, distance: '0px' }, 300); // Initialize and Configure Magnific Popup Lightbox Plugin $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: 'The image #%curr% could not be loaded.' } }); })(jQuery); // End of use strict
_header.html.erb
Your Favorite Source of Free Bootstrap Themes
Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!
Find Out More
index.html.erb
We've got what you need!
Start Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Start Bootstrap are open source, free to download, and easy to use. No strings attached!
Get Started! At Your Service
Sturdy Templates
Our templates are updated regularly so they don't break.
Ready to Ship
You can use this theme as is, or you can make changes!
Up to Date
We update dependencies to keep things fresh.
Made with Love
You have to make your websites with love these days!
Let's Get In Touch!
Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!
123-456-6789
application.html.erb
Template true %> true %>
application.css.scss
@import "bootstrap-sprockets"; @import "bootstrap"; @import "jquery-ui/all"; @import "font-awesome"; @import "magnific-popup"; html, body { height: 100%; width: 100%; } body { font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif; } hr { border-color: #F05F40; border-width: 3px; max-width: 50px; } hr.light { border-color: white; } a { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; color: #F05F40; } a:hover, a:focus { color: #eb3812; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; } .bg-primary { background-color: #F05F40; } .bg-dark { background-color: #222222; color: white; } .text-faded { color: rgba(255, 255, 255, 0.7); } section { padding: 100px 0; } aside { padding: 50px 0; } .no-padding { padding: 0; } .navbar-default { background-color: white; border-color: rgba(34, 34, 34, 0.05); font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .navbar-default .navbar-header .navbar-brand { color: #F05F40; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; text-transform: uppercase; } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #eb3812; } .navbar-default .navbar-header .navbar-toggle { font-weight: 700; font-size: 12px; color: #222222; text-transform: uppercase; } .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { text-transform: uppercase; font-weight: 700; font-size: 13px; color: #222222; } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #F05F40; } .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { color: #F05F40 !important; background-color: transparent; } .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: transparent; } @media (min-width: 768px) { .navbar-default { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); } .navbar-default .navbar-header .navbar-brand { color: rgba(255, 255, 255, 0.7); } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: white; } .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { color: rgba(255, 255, 255, 0.7); } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: white; } .navbar-default.affix { background-color: white; border-color: rgba(34, 34, 34, 0.05); } .navbar-default.affix .navbar-header .navbar-brand { color: #F05F40; font-size: 14px; } .navbar-default.affix .navbar-header .navbar-brand:hover, .navbar-default.affix .navbar-header .navbar-brand:focus { color: #eb3812; } .navbar-default.affix .nav > li > a, .navbar-default.affix .nav > li > a:focus { color: #222222; } .navbar-default.affix .nav > li > a:hover, .navbar-default.affix .nav > li > a:focus:hover { color: #F05F40; } } header { position: relative; width: 100%; min-height: auto; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-position: center; background-image: asset-data-url("header.jpg"); text-align: center; color: white; } header .header-content { position: relative; text-align: center; padding: 100px 15px 100px; width: 100%; } header .header-content .header-content-inner h1 { font-weight: 700; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 30px; } header .header-content .header-content-inner hr { margin: 30px auto; } header .header-content .header-content-inner p { font-weight: 300; color: rgba(255, 255, 255, 0.7); font-size: 16px; margin-bottom: 50px; } @media (min-width: 768px) { header { min-height: 100%; } header .header-content { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 50px; } header .header-content .header-content-inner { max-width: 1000px; margin-left: auto; margin-right: auto; } header .header-content .header-content-inner h1 { font-size: 50px; } header .header-content .header-content-inner p { font-size: 18px; max-width: 80%; margin-left: auto; margin-right: auto; } } .section-heading { margin-top: 0; } .service-box { max-width: 400px; margin: 50px auto 0; } @media (min-width: 992px) { .service-box { margin: 20px auto 0; } } .service-box p { margin-bottom: 0; } .portfolio-box { position: relative; display: block; max-width: 650px; margin: 0 auto; } .portfolio-box .portfolio-box-caption { color: white; opacity: 0; display: block; background: rgba(240, 95, 64, 0.9); position: absolute; bottom: 0; text-align: center; width: 100%; height: 100%; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; padding: 0 15px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { text-transform: uppercase; font-weight: 600; font-size: 14px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 18px; } .portfolio-box:hover .portfolio-box-caption { opacity: 1; } .portfolio-box:focus { outline: none; } @media (min-width: 768px) { .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 16px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 22px; } } .call-to-action h2 { margin: 0 auto 20px; } .text-primary { color: #F05F40; } .no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } .btn-default { color: #222222; background-color: white; border-color: white; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #222222; background-color: #f2f2f2; border-color: #ededed; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: white; border-color: white; } .btn-default .badge { color: white; background-color: #222222; } .btn-primary { color: white; background-color: #F05F40; border-color: #F05F40; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: white; background-color: #ee4b28; border-color: #ed431f; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #F05F40; border-color: #F05F40; } .btn-primary .badge { color: #F05F40; background-color: white; } .btn { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; border: none; border-radius: 300px; font-weight: 700; text-transform: uppercase; } .btn-xl { padding: 15px 30px; } ::-moz-selection { color: white; text-shadow: none; background: #222222; } ::selection { color: white; text-shadow: none; background: #222222; } img::selection { color: white; background: transparent; } img::-moz-selection { color: white; background: transparent; } body { webkit-tap-highlight-color: #222222; }
我终于成功了！ 首先，我从new开始，我创建了一个新的rails应用程序，因为我处于绝望的模式并安装到许多Gems并更改了代码，最后代码是一团糟。
这次我采取了不同的方法，我没有使用任何额外的gem，我已经手动安装了所有必要的插件，这意味着只需将所有文件复制并粘贴到正确的目录中并将它们链接在一起。 我不得不删除javascript目录中的coffeescript文件，因为该文件导致了一些问题。 正如您所看到的，我还必须在body标签内手动放置一个触发器，否则ScrollSpy函数将无法工作（data-spy =“scroll”data-target =“。navbar-fixed-top”）。 由于某种原因Javascript仍然无法正常工作，但我已经读过Javascript / jQuery如果没有正确加载，可能会导致一些问题，这意味着正确的oder。 所以我删除了// = require_tree。 在javascript文件中。 并按正确顺序放置每个javascript。 我可以通过查看工作模板的源代码找出正确的oder。 但它仍然无法正常工作！ 然后我将“<％= javascript_include_tag'应用程序'，'data-turbolinks-track'=> true％>”放在标记的最后，以便javascript最后加载。 ……最后它奏效了！ 我的下一步是删除application.js文件中的turbolinks行，我会改变：
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
成
<%= stylesheet_link_tag 'application', media: 'all' %>
因为我已经读过，turbolinks会导致资产管道出现一些问题，尤其是javascript。
application.html.erb
Creativetemplate <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <%= render 'layouts/header' %> <%= yield %> <%= render 'layouts/footer' %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
的application.js
//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap //= require jquery.easing //= require scrollreveal //= require jquery.magnific-popup //= require welcomes
welcomes.js
(function($) { "use strict"; // Start of use strict // debugger // jQuery for page scrolling feature - requires jQuery Easing plugin $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top - 50) }, 1250, 'easeInOutExpo'); event.preventDefault(); }); // Highlight the top nav as scrolling occurs $('body').scrollspy({ target: '.navbar-fixed-top', offset: 51 }); // Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); }); // Offset for Main Navigation $('#mainNav').affix({ offset: { top: 100 } }) // Initialize and Configure Scroll Reveal Animation window.sr = ScrollReveal(); sr.reveal('.sr-icons', { duration: 600, scale: 0.3, distance: '0px' }, 200); sr.reveal('.sr-button', { duration: 1000, delay: 200 }); sr.reveal('.sr-contact', { duration: 600, scale: 0.3, distance: '0px' }, 300); // Initialize and Configure Magnific Popup Lightbox Plugin $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: 'The image #%curr% could not be loaded.' } }); })(jQuery); // End of use strict
application.css.scss
/* *= require magnific-popup *= require welcomes */ @import "bootstrap"; @import "font-awesome"; html, body { height: 100%; width: 100%; } ... ... ...
如果有人与Javascript和资产管道有类似的问题，我会尝试解决它：
1）确保所有文件都在正确的目录中
2）检查application.css.scss，application.js和application.html.erb中是否所有文件都正确链接在一起
3）删除“// = require_tree”。 在application.js中行，因为它加载没有特定顺序的javascript，它可能会产生一些问题。 按主题的正确顺序手动键入每一行。 您可以通过在浏览器中查看模板的源代码来检查正确的oder。
4）通过比较运行本地服务器的源代码并使用模板网站检查网站，检查是否安装了正确的插件版本号。
5）如果你不需要javascript目录中的coffeescript文件，那么删除它。
6）从关闭体标记正上方的head标记内移动“javascript_include_tag”。 所以javascript最后可以加载。
7）摆脱application.js和application.html.erb中的turbolinks。
8）如果它仍然不起作用，请检查网站Chrome中的开发人员工具（控制台），您也可以在javascript文件中使用调试器来查看是否有任何错误。
希望它可以帮助某人。
我正在编辑我的答案，因为我仍然遇到资产管道问题。
我添加了以下可能有助于找到解决方案的资源，一旦我解决了问题，我就会将解决方案发布到问题中。
https://launchschool.com/blog/rails-asset-pipeline-best-practices
https://railsapps.github.io/rails-javascript-include-external.html
https://reinteractive.com/posts/116-12-tips-for-the-rails-asset-pipeline
我阅读了搜索rails资产管道可以找到的所有指南，但我不会将它们全部链接
我的建议是使用Chrome开发者工具检查application.css和application.js的指纹（通过进入任何屏幕元素，使用f12打开开发人员工具箱并检查任何div或任何js文件的任何样式）。 您需要检查文件的指纹版本，然后使用文本编辑器打开该版本，并检查文件指纹版本中加载的内容。
如果您的文件（例如ex.user.js）加载在清单的底部，您应该很容易在指纹application.js的底部找到它。
如果要更新此文件，则可以运行
rake assets:precompile
这将仅在开发中预编译资产，用于指定环境所需的生产。 它将使用您完成的编辑更改指纹文件application.css和application.js。
您还可以在以下地址localhost:3000/assets/yourjsfile.js检查文件，或者按照localhost:3000/assets/application-yourfingerprint.js检查指纹版本。
如您所见，许多文件都包含在该public / assets文件夹中，您可以使用rake assets:clean删除它们rake assets:clean或-rf public/assets然后运行rake assets:precompile ，它将再次预编译资产。
如果不包含任何内容，则表示您的application.js未加载。 当我在不同的post上阅读时，您可以尝试以下内容：
-
使用以下代码
config/initializers/assets.rb文件包含在config/initializers/assets.rb中：Rails.application.config.assets.precompile += %w( user.js ) -
启动
rails c并运行Rails.application.config.assets.paths此命令将以红色显示自动包含的路径，例如App，Lib和Vendor中的路径，绿色显示通过添加内部config/application.rb包含的路径config/application.rb以下代码添加新路径config.assets.paths << Rails.root.join("vendor","assets", "fonts")
我在过去做的另一个错误是没有使用正确的sprockets语法，你可以在以下链接检查它（我使用的是require_user而不是require用户）：
https://github.com/rails/sprockets#sprockets-directives
我的问题是我在App / assets / javascript下有两个名为user（user.coffee和user.js）的文件。 第一个加载的是user.coffee，它是空的。 我找到了解决方案，感谢trickydiddy的答案