Question

更新

我从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 文件。

我做了以下事情：

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

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

https://barteringapps.herokuapp.com/

请按照上面的链接，使用chrome您可以在18610行的application.js文件中测试此功能，设置断点并看到<a id="signupFacebookButton">没有反弹。点击大底“用脸书注册”即可触发效果。

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

这就是我所知道的，我运行的jquery版本是v2.2.4，它与JqueryUi兼容。我的jquery-rails gem版本是4.2.2，而我的jquery-ui版本是以下'〜＆gt; 6.0'，'＆gt; = 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)

Answer 1

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

了解更多了解如何创建特定布局 rails assets in production not served (yet another assets issue)

在这个布局中我会使用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;
}

使用jquery-ui

更新

摘要

文档

代码

1 个答案: