Rails jquery-ui 的资产管道问题
Rails Asset Pipeline problems with jquery-ui
更新
我从 jquery 网站下载了最新版本的 jquery 3.1 和 jquery-ui。不幸的是,.effect()
函数的这个问题没有连接到资产管道。我包含了所有 required js 和 css 文件,但 .effect()
不起作用。
此问题仅与Jquery-ui有关,而jquery方法可以正常工作。
我放弃了,做一个 git 结帐,我现在不会使用 Jquery-ui 效果。
总结
我的资产管道工作正常,但是当我想使用 jquery-ui .effect()
函数时,我注意到 jquery-[=107 有问题=] 来自我的浏览器控制台的样式表。
我在 rails 环境之外用 1.12.1/jquery-ui.js 测试了这个函数并且它有效。
我可以 显示 jquery-ui.css 文件 http://localhost:3000/assets/jquery-ui.css
。
我做了以下事情:
- 因为我的 jquery-ui.js 文件也是空的,所以我在我的应用程序 js 中要求 uired
//= require jquery2
。这解决了 jquery-ui.js
的问题
- 由于 jquery-ui.css 文件丢失,我执行了以下操作:
- 运行
rm -rf public/assets
删除该文件夹中的文件(我也尝试过 rake assets:clean
)
- 运行 rails assets:precompile 正在开发和生产中
- 清除浏览器缓存并使用chrome匿名浏览
这没有解决任何问题,但我可以看到该文件并且在生产环境中不存在这个问题。 application.css 文件包括 jquery-ui.css。
所以也许 .effect()
不适用于 css,但缺少 js 文件?该效果在生产中也不起作用。
https://barteringapps.herokuapp.com/
请按照上面的link,用chrome可以在application.js文件第18610行测试这个功能,设置断点,看到<a id="signupFacebookButton">
不反弹。点击大底触发效果"sign up with facebook".
我想也许我没有反弹效果,但我可以看到 Development 中包含该文件,我想这不是问题所在。
Mozilla 给我以下错误 "http:localhost:3000/assets/jquery-ui.self-fingerprint.css can not be loaded"(我没有清除 mozilla cash)。
我知道的就这些了,我运行ning的jquery版本是v2.2.4,兼容JqueryUi。我的jquery-railsgem版本是4.2.2,而我的jquery-ui版本是下面的'~>6.0','>=6.0 .1'.
文档
我已阅读并遵循以下帖子的说明
Rails Assets Precompile just not working
我读了这一篇,但我没有运行 rm Gemfile.lock
。
Can't find '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', '< 0.5'
gem 'pg'
# Use Puma as the app server
gem 'puma', '~> 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 <%= console %> 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, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
我通过创建具有特定布局的测试控制器解决了这个问题。
阅读更多内容以创建特定布局
在此布局中,我将使用 jquery 和 jquery-ui 的 cdn 版本,因为它适用于 CDN 而不是 jquery-ui gem,我了解到第一个问题是 gem。
正在下载 jquery-ui(其中还包括 jquery 文件)并在我的 vendor/assets/javascripts 样式表解决了问题
其他 javascript 文件不会导致任何其他问题,但使用此测试控制器也测试样式表,我发现特定的自定义 css 样式表破坏了 jquery-ui效果。
我可以通过删除样式表来解决这个问题,但是其中包含很多不错的效果(因为我正在使用布局)。
在这一点上,我刚开始使用 chrome 开发人员工具来取消注释 link 具有的所有 css 属性,因此我通过测试 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;
}
更新
我从 jquery 网站下载了最新版本的 jquery 3.1 和 jquery-ui。不幸的是,.effect()
函数的这个问题没有连接到资产管道。我包含了所有 required js 和 css 文件,但 .effect()
不起作用。
此问题仅与Jquery-ui有关,而jquery方法可以正常工作。 我放弃了,做一个 git 结帐,我现在不会使用 Jquery-ui 效果。
总结
我的资产管道工作正常,但是当我想使用 jquery-ui .effect()
函数时,我注意到 jquery-[=107 有问题=] 来自我的浏览器控制台的样式表。
我在 rails 环境之外用 1.12.1/jquery-ui.js 测试了这个函数并且它有效。
我可以 显示 jquery-ui.css 文件 http://localhost:3000/assets/jquery-ui.css
。
我做了以下事情:
- 因为我的 jquery-ui.js 文件也是空的,所以我在我的应用程序 js 中要求 uired
//= require jquery2
。这解决了jquery-ui.js
的问题
- 由于 jquery-ui.css 文件丢失,我执行了以下操作:
- 运行
rm -rf public/assets
删除该文件夹中的文件(我也尝试过rake assets:clean
) - 运行 rails assets:precompile 正在开发和生产中
- 清除浏览器缓存并使用chrome匿名浏览
这没有解决任何问题,但我可以看到该文件并且在生产环境中不存在这个问题。 application.css 文件包括 jquery-ui.css。
所以也许 .effect()
不适用于 css,但缺少 js 文件?该效果在生产中也不起作用。
https://barteringapps.herokuapp.com/
请按照上面的link,用chrome可以在application.js文件第18610行测试这个功能,设置断点,看到<a id="signupFacebookButton">
不反弹。点击大底触发效果"sign up with facebook".
我想也许我没有反弹效果,但我可以看到 Development 中包含该文件,我想这不是问题所在。 Mozilla 给我以下错误 "http:localhost:3000/assets/jquery-ui.self-fingerprint.css can not be loaded"(我没有清除 mozilla cash)。
我知道的就这些了,我运行ning的jquery版本是v2.2.4,兼容JqueryUi。我的jquery-railsgem版本是4.2.2,而我的jquery-ui版本是下面的'~>6.0','>=6.0 .1'.
文档
我已阅读并遵循以下帖子的说明 Rails Assets Precompile just not working
我读了这一篇,但我没有运行 rm Gemfile.lock
。
Can't find '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', '< 0.5'
gem 'pg'
# Use Puma as the app server
gem 'puma', '~> 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 <%= console %> 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, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
我通过创建具有特定布局的测试控制器解决了这个问题。
阅读更多内容以创建特定布局
在此布局中,我将使用 jquery 和 jquery-ui 的 cdn 版本,因为它适用于 CDN 而不是 jquery-ui gem,我了解到第一个问题是 gem。
正在下载 jquery-ui(其中还包括 jquery 文件)并在我的 vendor/assets/javascripts 样式表解决了问题
其他 javascript 文件不会导致任何其他问题,但使用此测试控制器也测试样式表,我发现特定的自定义 css 样式表破坏了 jquery-ui效果。
我可以通过删除样式表来解决这个问题,但是其中包含很多不错的效果(因为我正在使用布局)。
在这一点上,我刚开始使用 chrome 开发人员工具来取消注释 link 具有的所有 css 属性,因此我通过测试 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;
}