问题
Update
I downloaded the latest version of jquery 3.1 and jquery-ui from the jquery website. Unluckly this problem with the .effect()
function is not connected to the asset pipeline. I had all the required js and css files included, but .effect()
would not work.
This problem is only related to Jquery-ui, while jquery methods work fine. I am giving up on this, doing a git checkout and I will not use Jquery-ui effects for now.
Summary
My asset pipeline was working fine, but as I wanted to use jquery-ui .effect()
function, I noticed problems with the jquery-ui.css stylesheets from my browser console.
I tested this function outside of the rails environment with 1.12.1/jquery-ui.js and it worked.
I can display the jquery-ui.css file at http://localhost:3000/assets/jquery-ui.css
.
I did the following:
- As my jquery-ui.js file also was empty I required
//= require jquery2
in my application js. This solved the problem withjquery-ui.js
- As jquery-ui.css file was missing I did the following:
- run
rm -rf public/assets
deleting the file in that folder (I also tried withrake assets:clean
) - run rails assets:precompile in development and production
- clearing the browser cache and using chrome anonymous browsing
This did not fix anything, but I can see the file and in production this problem does not exist. The application.css file includes the jquery-ui.css.
So maybe the .effect()
is not working for the css, but for missing js files? The effect does not work in production also.
https://barteringapps.herokuapp.com/
Please follow the link above, with chrome you can test this function in the application.js file at line 18610, set a breakpoint and see that the <a id="signupFacebookButton">
does not bounce. The effect is triggered by clicking on the big bottom "sign up with facebook".
I thought maybe I do not have the bounce effect, but I can see that file included in Development and I suppose that is not the problem. Mozilla give me the following error "http:localhost:3000/assets/jquery-ui.self-fingerprint.css can not be loaded" (i did not clear mozilla cash).
This is all what I know, the version of jquery I am running is v2.2.4 which is compatible with JqueryUi. My jquery-rails gem version is 4.2.2, while my jquery-ui version is the following '~> 6.0', '>= 6.0.1'.
Documentation
I have read and followed the instructions of the following posts Rails Assets Precompile just not working
I read this one, but I did not run rm Gemfile.lock
.
Can't find 'jquery-ui' Rails 3.2
Maybe my next step now will be performing a Git and trying to just include the jquery-ui files manually in my project.
Code
This is my 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'
This is my application 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
This is my application 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 including the code to make the button bounce
$(document).on('ready page:load', function() {
$('#signupFacebookButton').click(function(){
$(this).effect("bounce", "slow");
console.log("It was called");
});
});
Main.css code for styling the button
.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 (relevant lines)
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)
回答1:
I solved this problem by creating a testing controller with a specific layout.
Read more hear to create a specific layout rails assets in production not served (yet another assets issue)
In this layout I would use cdn version of jquery and jquery-ui and as it would work with CDN and not with the jquery-ui gem, I understood that a first problem was with the gem.
Downloading jquery-ui (which included also jquery files) and including jquery and jquery-ui in my vendor/assets/javascripts and stylesheets solved the problem
The other javascript files would not cause any other problem, but using this testing controller to test also the stylesheets, I discovered that a specific custom css stylesheet was breaking the jquery-ui effect.
I could solve this problem by removing the stylesheet, but a lot of nice effect where there included (as I am using a layout).
At this point i just started with chrome developer tools to uncomment all the css properties that the link had, so that I found out, by testing the effect which property was creating problems
For example the css property that did create conflicts was with the 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;
}
来源:https://stackoverflow.com/questions/42861706/rails-asset-pipeline-problems-with-jquery-ui