I am trying to figure out how to connect the bootstrap theme. I have a compass gem and rails 4.
I have a number of errors displayed in my console that say:
Failed to load resource: the server responded with a status of 404 (Not Found)
I think this is due to the fact that my paths to where the supplier’s assets are stored are incorrect.
I have a layout called 'profile.html.erb'
In this layout, I included:
<link href="vendor/assets/stylesheets/magnific-popup.css" rel="stylesheet" type="text/css"/>
The linked css file is saved in the folder of my provider / assets / style sheets.
The full error text shows a link to:
http://localhost:3000/profiles/vendor/assets/stylesheets/magnific-popup.css
An extra bit is a link to profiles.
Can anyone see what I did wrong in defining these paths?
FURTHER ATTEMPT
I just found this post: How do I load a provider resource folder in Rails 4?
Taking advice in this post, I tried to modify the application.css.scss file so that instead of using the path link, I had;
@import "css/magnific-popup";
When I save, restart the server, I get this error:
File to import not found or unreadable: css/magnific-popup. Load paths: CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter CompassRails::SpriteImporter /Users/f3/app/assets/images /Users/f3/app/assets/javascripts /Users/f3/app/assets/stylesheets /Users/f3/vendor/assets/fonts /Users/f3/vendor/assets/javascripts /Users/f3/vendor/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/underscore-rails-1.8.3/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/gmaps4rails-2.1.2/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/images /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/chartkick-1.4.1/app/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/formtastic-2.2.1/app/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/images /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/dependent-fields-rails-0.4.2/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/cocoon-1.2.6/app/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/disqus_rails-0.0.6/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.0.5/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.0/lib/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/momentjs-rails-eda1b74512db/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/stylesheets /Users/f3/Rails/vendor/assets/fonts /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/javascripts /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/fonts /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/images /Users/f/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/fonts /Users/f3/app/assets/stylesheets /Users/f/.rvm/gems/ruby-2.3.0/gems/compass-core-1.0.3/stylesheets Compass::SpriteImporter /Users/melaniemaslem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets /Users/melaniemaslem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets
Can anyone see what I need to do to be able to integrate these provider assets into my Rails 4 application?
I found this post:
https://github.com/rails/rails/issues/11759
This suggests that I need to add something to my config, but I'm confused about what might be (or if it is on the right path), since the question is about the image file.
Can anyone figure this out?
FURTHER LAST
I also tried adding link tags to the section section of the layout to link to style sheets (which should already be imported via application.css.scss).
I added:
<%= stylesheet_link_tag "magnific-popup.css" %>
to the header section of the layout.
When I try to do this, I get an error message telling me to add the following line to my config / initializer / assets.rb:
Rails.application.config.assets.precompile += %w( magnific-popup.css )
When I try to do this, I still get the same error (404). I don’t understand why this is necessary (or what it does. I thought adding the imported magnific-popup to application.css.scss was all that was required).
I wonder if I need to reference the path in the provider from the layout ... if that is even required.
For javascript files, I get two types of errors:
First:
TypeError: undefined is not an object (evaluating '$') (anonymous function)circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:8 http://localhost:3000/assets/circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js?body=1
I have a file named:
circle-progress.js
This is the vendor component that comes with the wrap bootstrap theme. I initially put it in the vendor / assets / javascripts folder and then in application.js
I saw a chat in another help forum where someone solved their problem by moving the file to app / assets / javascripts and then removing the require statement from the .js application.
I tried this and reused rake assets: recompile, but I still get the error.
The second problem:
TypeError: dp('#portfolioFiltering').multipleFilterMasonry is not a function. (In 'dp('#portfolioFiltering').multipleFilterMasonry', 'dp('#portfolioFiltering').multipleFilterMasonry' is undefined) onloadmain.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:315
And it displays the E onload link to http: // localhost: 3000 / assets / main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js? Body = 1
I did not have enough time to try to solve these problems.
Can anyone see where everything went wrong?
OTHER CLIENT
I found another blog post describing the problems encountered when setting up boot themes in rails. The user found similar javascript errors for one of them, and this was due to the fact that two versions of jQuery are included.
My application.js file has it all:
//= require jquery //= require bootstrap-sprockets //= require jquery_ujs //= require html.sortable //= require disqus_rails //= require moment //= require bootstrap-datetimepicker //= require pickers //= require main //= require hammer.min //= require jquery.animate-enhanced.min //= require jquery.countTo //= require jquery.easing.1.3 //= require jquery.fitvids //= require jquery.magnific-popup.min //= require jquery.parallax-1.1.3 //= require jquery.properload //= require jquery.shuffle.modernizr.min //= require jquery.sudoSlider.min //= require jquery.superslides.min //= require masonry.pkgd.min //= require rotaterator //= require smoothscrolljs //= require waypoints.min //= require wow.min //= require gmaps/google //= require chosen-jquery //= require cocoon //= require imagesloaded.pkgd.min //= require isotope.pkgd.min //= require jquery.counterup.min //= require jquery.pjax //= require custom.js //= require slider //= require underscore //= require dependent-fields //= require_tree . //= require bootstrap-slider $(document).ready(function() { DependentFields.bind() });
Each jQuery reference has a different suffix for it, but can anyone see where it can be a duplicate of the other?