Rails资产管道问题与jquery-ui

更新

我从jquery网站下载了最新版本的jquery 3.1和jquery-ui。 不幸的是， .effect()函数的这个问题没有连接到资产管道。 我包含了所有必需的js和css文件，但.effect()不起作用。

这个问题只与Jquery-ui有关，而jquery方法工作正常。 我放弃了这个，做了一个git checkout，我现在不会使用Jquery-ui效果。

摘要

我的资产管道工作正常，但由于我想使用jquery-ui .effect()函数，我发现浏览器控制台中的jquery-ui.css样式表存在问题。

我使用1.12.1 / jquery-ui.js在rails环境之外测试了这个函数，并且它工作正常。 我可以在http://localhost:3000/assets/jquery-ui.css 显示 jquery-ui.css文件。

我做了以下事情：

1. 由于我的jquery-ui.js文件也是空的，我需要在我的应用程序js中//= require jquery2 。 这解决了jquery-ui.js的问题
2. 由于缺少jquery-ui.css文件，我执行了以下操作：
3. 运行rm -rf public/assets删除该文件夹中的文件（我也尝试过rake assets:clean ）
4. run rails assets：在开发和生产中预编译
5. 清除浏览器缓存并使用chrome匿名浏览

这没有解决任何问题，但我可以看到文件和生产中这个问题不存在。 application.css文件包含jquery-ui.css。 所以也许.effect()不适用于css，但缺少js文件？ 效果在生产中也不起作用。

https://barteringapps.herokuapp.com/

请按照上面的链接，使用chrome，您可以在18610行的application.js文件中测试此function，设置断点并查看不会反弹。 点击大底“用facebook注册”即可触发效果。

我想也许我没有反弹效果，但我可以看到该文件包含在开发中，我想这不是问题。 Mozilla给我以下错误“http：localhost：3000 / assets / jquery-ui.self-fingerprint.css无法加载”（我没有清楚mozilla现金）。

这就是我所知道的，我运行的jquery版本是v2.2.4，它与JqueryUi兼容。 我的jquery-rails gem版本是4.2.2，而我的jquery-ui版本是以下’〜> 6.0’，’> = 6.0.1’。

文档

我已阅读并按照以下post的说明Rails Assets Precompile无法正常工作

我读了这个，但我没有运行rm Gemfile.lock 。 找不到’jquery-ui’Rails 3.2

也许我现在的下一步将是执行Git并尝试在我的项目中手动包含jquery-ui文件。

码

这是我的Gemfile

 source 'https://rubygems.org' ruby '2.3.3' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.1' # Use sqlite3 as the database for Active Record #gem 'sqlite3' #gem 'mysql2', '>= 0.3.18', ' 3.0' # Use SCSS for stylesheets gem 'bootstrap-sass', '~> 3.3.6' gem 'font-awesome-sass' gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' gem 'jquery-ui-rails', '~> 6.0', '>= 6.0.1' #gem 'jquery-ui-rails' gem 'jquery-easing-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs wwith ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' gem "font-awesome-rails" # Use Capistrano for deployment # gem 'capistrano-rails', group: :development gem 'sprockets-rails', :require => 'sprockets/railtie' group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platform: :mri end group :development do # Access an IRB console on exception pages or by using  anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.0.5' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' gem "better_errors" gem "binding_of_caller" gem "pry-rails" gem "pry-byebug" end group :production do gem 'rails_12factor', '0.0.2' end group :development, :test do gem 'foreman' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Additional Gems added from Fabrizio gem 'country_select' gem 'devise' gem 'omniauth-facebook' gem 'acts-as-taggable-on', '~> 4.0' gem 'fog', '~> 1.38' #gem 'fog-aws' gem 'rmagick', '~> 2.16' gem 'carrierwave', github: 'carrierwaveuploader/carrierwave' gem 'mini_magick' 

这是我的应用程序js

 //= require jquery2 //= require jquery_ujs //= require bootstrap-sprockets //= require jquery.easing //= require jquery.scrollTo //= require jquery.nicescroll //= require jquery-ui //= require jquery.tagsinput //= require form-component //= require scripts //= require bootstrap-switch //= require wow.min //= require user //= require main 

这是我的应用程序css

 /* *= require jquery-ui */ @import "bootstrap-sprockets"; @import "bootstrap"; @import "bootstrap-theme"; @import "jquery-ui"; @import "elegant-icons-style"; @import "font-awesome"; @import "animate"; @import "style"; @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); @import "line-icons"; @import "style-2"; @import "default"; @import "style-responsive"; @import "user"; @import "jquery-ui"; @import "main"; 

Main.js包括使按钮弹跳的代码

 $(document).on('ready page:load', function() { $('#signupFacebookButton').click(function(){ $(this).effect("bounce", "slow"); console.log("It was called"); }); }); 

用于样式化按钮的Main.css代码

 .signup { background-color: #00ccff; padding: 10px 30px; border: none; color: white; padding-left: 24px; padding-right: 21px; border-radius: 100px; } .fa-2x { position: relative; bottom: -7%; left: 2%; } .signup span { position: relative; bottom: 3px; /*11%;*/ padding-left: 21px; font-size: 23px; } .btn-default:hover { border: none; outline: none; } 

Gemfile.lock（相关行）

  jquery-easing-rails (0.0.2) railties (>= 3.1.0) jquery-rails (4.2.2) rails-dom-testing (>= 1, = 4.2.0) thor (>= 0.14, = 3.2.16) 

Answer 1

我通过创建具有特定布局的测试控制器解决了这个问题。

阅读更多内容了解如何在未投放的生产中创建特定布局轨道资产（另一个资产问题）

在这个布局中，我将使用cdn版本的jquery和jquery-ui，因为它可以使用CDN而不是jquery-ui gem，我明白第一个问题是gem。

下载jquery-ui（其中还包括jquery文件）并在我的vendor / assets / javascripts和样式表中包含jquery和jquery-ui解决了这个问题

其他javascript文件不会导致任何其他问题，但使用此测试控制器来测试样式表，我发现一个特定的自定义CSS样式表打破了jquery-ui效果。

我可以通过删除样式表来解决这个问题，但是包含很多很好的效果（因为我正在使用布局）。

在这一点上，我刚开始使用chrome开发人员工具取消注释该链接所具有的所有css属性，以便通过测试属性创建问题的效果我发现了

例如，确实产生冲突的css属性是使用a tag

 a { color: #28c3ab; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }