I've added the webpacker gem, bundled, installed and edited all my javascript_include tags to javascript_pack.
What happens with the existing javascript? I have lots of it under app/assets/javascripts and vendor/assets/javascripts. It doesn't seem to pick it up automatically.
Some of this javascript is required into application.js.erb and some other files load directly into various parts of the application, eg:
app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init
Then I also have:
app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index
Some of these files are small Vue apps, I've placed their templates under Rails views. Now after this webpacker business I have app/assets/javascripts (which contains all my actual code but is ignored), then app/javascript which I don't know what it is, and app/javascripts where I'm supposed to put my Vue apps. Or the other way around. Or something.
How do I get all this to work with webpacker? None of the tutorials I've found cover migrating existing code to webpacker and to be honest I don't understand much from all those javascript snippets they just dump there but don't explain what it actually does and how.
By default, adding webpack doesn't change anything. For example, if you leave javascript_include_tag 'application' in your layout, it will continue to work the same as it did before adding webpack.
The files in the javascript/packs folder are entry points for javascript. If you are doing a single page app, you will likely have a single pack like application.js which boots up your entire application. If you are doing a conventional app, you will likely have a main application.js file that loads all global scripts, plus other page or component level scripts like settings.js or calendar.js. These scripts are loaded with javascript_pack_tag 'application'.
If you move your files out of the assets folder into the javascript folder you can then add them to your pack file like so:
import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';
window.addEventListener('DOMContentLoaded', (event) => {
console.log('do init stuff here');
// use bootstrap here
});
After a while looking for similar issues I couldn't find a solution. Most of them is for "only Ruby and Heroku" type of error.
But here I'm using AngularJS to import all my css and js files (including Bootstrap). The thing is, I cannot visualize my glyphicons on Heroku when locally works like a charm.
I tried in production.rb
config.assets.compile = true
Also to precompile my assets and pushing:
$ rake assets:precompile RAILS_ENV=production
Didn't work.
What else can I do?
My application.css
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*= require angular-material/angular-material
*= require font-awesome/css/font-awesome
*= require bootstrap-social/bootstrap-social
*= require bootstrap-datepicker3
Thank you.
I had similar issue with icons in the past days. Could you post 2 images, one visualizing you Chrome/Mozilla Developer Console focusing on the css and html of that icon not visualized. This should be done for production and development. Basically my problem was in the asset pipeline.
1. The asset-url method did not work ...
2. The icons were based on a separate CSS Stylesheet. This CSS stylesheet was imported with #import from a stylesheet in the asset pipeline. Anyway you will notice the difference. Post the image, it may help.
What I am trying to say is, that you should focus on the difference between the fingerprinted application-fingerprint.css file from production and the one in development. It may be that you are not loading the css in development from the application.css, but from other file, then that file is not available in production.
Additionally I do not use require_tree
You can read my post at the following link and there are many post about the asset pipeline on stackoverflow, but is better to just interact and comment me so that i can try to help you.
Javascript does not work from a bootstrap template in rails
Rails 5 problems with multiple manifest files
I'm trying to get a Galleria slideshow up and running in my rails app. It works fine with the local server (on both Chrome and Firefox) but does not work on the live server (on either Chrome or Firefox). In Chrome, the slideshow flashes briefly (maybe .25 seconds?) upon loading before going away. In Firefox, it just never shows up at all.
When I look at what is happening with inspect element on Chrome, under the network tab, it says that galleria.classic.css was canceled due to a 404 error.
I have the following code in my app: (note, originally, I had other code on the page, but I pulled the slideshow to an admin-only page so I could examine it live without messing up the client-facing stuff so that's all that's on the page. It didn't work either on the client-facing page or the admin page.
In the view:
<head><link rel="stylesheet" type="text/css" href="assets/libs/galleria/themes/classic/galleria.classic.css"></head>
<body>
<div id="slideshow">
<div id="galleria">
<%= image_tag("pic1_url")%>
<%= image_tag("pic2_url")%>
<%= image_tag("pic3_url")%>
</div>
<script>
$('#galleria').galleria();
</script>
</div>
</body>
In my application.css stylesheet, I have:
*= require_self
*= require galleria/themes/classic/galleria.classic
*= require_tree .
*/
In my application.js file, I have:
//= require jquery
//= require jquery_ujs
//= require jquery_nested_form
//= require galleria/galleria-1.2.9.min
//= require galleria/themes/classic/galleria.classic
//= require_tree .
Fixes I've tried:
Double check my pathways (per this answer: Galleria works locally in all browsers but only IE8 & Chrome when hosted). They are all forward slashes not backwards slashes.
In galleria.classic.js, changed css: galleria.classic.css to css: false (per this answer:Galleria not showing up on Heroku in Rails app)
I have my Galleria in the rails asset pipeline in vendor/assets/libs/galleria (per this answer: Where to put Galleria (jQuery image gallery framework) in Rails 3.1 Asset Pipeline?)
I added type="text/css" to the link to the stylesheet in the head, (per the second answer here: Galleria not loading on initial page visit)
How can I get Galleria to work?
When you deploy your file to production it compile and collect all your assets in one folder called assets, so specified paths doesn't work, because there is no galleria/themes/classic/ path on Heroku server or other server, which you're using.
So, you need to specify path in HTML file like this href="assets/galleria.classic.css" if it is necessary.
But in fact your
*= require galleria/themes/classic/galleria.classic
and
//= require galleria/galleria-1.2.9.min
//= require galleria/themes/classic/galleria.classic
has already done it, and all the necessary code must be in your compiled .css and .js files. So, you can just remove <link rel...> part from your code.
P.S. I'm trying to avoid subfolders in css, javascripts and images folders, because it can often cause such problems like yours, and also it's make app structure more clear. But to do so, you need to check plugin files, if they have any specified paths to each other, and remove any /folder/subfolder/ part of them, left only filenames.
i was wondering if someone could help me. my bootstrap drop down menu suddenly stopped working. i have no idea why. it was working before. i didn't touch my views my layouts views so i think the problem is not there. im pretty sure it has to do with my javascript but i dont know where its coming from.
my gem file is...
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'delayed_job_active_record'
gem 'daemons'
gem 'make_voteable'
gem 'admin_data'
gem 'indextank'
and my application.js is...
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-dropdown
//= require bootstrap
//= require_tree .
im guessing maybe it has to do with my config files somehow?
had to move
//= require jquery
below
//= require bootstrap
within
application.js
if precompiling assets does not work try also removing precompiled assets
rake assets:clean
I found that dropdown js being loaded twice into the asset pipeline seems to open and close the dropdown menu instantly, but would work fine in Heroku/Production.
I had the same problem and I found 2 ways to fix it.
First, let me tell you my set up: I followed the instructions at the bootstrap site, and downloaded bootstrap-dropdown.js. I put it in assets/javascripts.
My application.js file looks like this:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
Dropdowns didn't work.
I noticed in the page source that a script tag for bootstrap-dropdown.js appeared twice: (I've removed the irrelevant stuff for brevity)
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
So I removed the line //= require_tree . from application.js, restarted the server, and the dropdown worked!
Then I put back the line //= require_tree . and instead removed the file assets/bootstrap-dropdown.js, and again it worked!
I don't understand this, but reordering //= require jquery and //= require bootstrap has seemed to fix the problem twice for me. First moving bootstrap above jquery as Sasha suggests fixed it. Then I did more work and prepared to deploy using jruby on rails 3.2.3. Precompile assets, warble, and the dropdowns quit working both in development and production. Delete public/assets, as well as some .class files and files in tmp. No effect. Finally I moved the order in application.js back to what it had been before the last failure episode, i.e. jquery before bootstrap, and dropdowns work again.
Could an alteration to application.js be triggering a rebuild of some cache, or some process behind the scenes that is the source of the problem? Next time this happens, I will try a trivial change to application.js and see if that does anything.
I was experiencing this on my development machine but my production server worked fine.. I noticed that while reordering the js requires in the application.js fixes the problem in development (dropdowns work again), be careful as this killed my dropdowns in production. I had to go back and put them back the way they were to get production working again. For now I am just temporarily changing them in dev when I need to.
Precompiling the assets again fixed the problem for me
I had this problem too...and it was related to rails turbolinks. On initial page load the drop downs would not work, but after a refresh they would. And, this is because with turbo links some Dom elements might not get loaded/reloaded every time. So, my drop down stopped working consistently (among other things). The rails 4 fix for this is to add the jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks. One thing with this gem that I found (and later came across in some blog) is that the javascript tag must be inside the head. The README does not mention this...but
I found a alternative! all of these solutions didnt work for me. Instead of having the dropdown triggered on click, I had it trigger on hover instead. put on bottom of page in script tags. code from: http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-rails/
$(document).ready(function(){
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
n})
Also make sure that you don't have //require bootstrap-sprockets inside your application.js. I have commented that and it worked for me.
See Rails 3.1 Assets - Strange Serving in Development
there is a bug where the compressed version is being included in debug mode in application.js
Precompiling assets did not work.
Putting dropdown before jquery worked in development but not in production
Removing dropdown still worked in development :-O
Putting the right order and removing everything in public/assets folder made it work in development.
Ticket #5145 was recently closed for this. The fix was reverted, but an application specific solution was supplied at the end, and works for me. Be sure to clear your browser cache, too.
Moving //= require jquery below //= require bootstrap and upgrading gem 'bootstrap-sass', to 2.3.0.1, solved my problem.
I want to add that solution which i mentioned above works only on Localhost but not on Heroku.
Solution for both in my case was:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
gem bootstrap-sass, 2.3.0.1
and <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> needs to be inside
"_header.html.erb" and delete from "application.html.erb" .
I had this error and it turns out my CSS was preventing the dropdown to work.
Specifically I had 'overflow: hidden;' in my header nav CSS . Removing that solved the issue.
Man, WTH is going on with this stuff. You know what that line actually does in Rails 3.1?
<script src="/assets/defaults.js" type="text/javascript"></script>
As they say on ESPN, "Come on, man."
I know that assets are no longer treated as second-class citizens. But it seems as if they are unable to even receive a green card in this release candidate. In the new app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Sooooo. Am I supposed to download jquery? What do I do? Because there's nothing in that javascripts directory except application.js.
Aggravating. And yet it's free, so how am I complaining? Anyway, these issues seem pretty basic, but I would appreciate any help you can offer.
In Rails 3.1 there is no longer a "defaults" as such, but rather what is specified in your application.js file are the "defaults". You would include this file using this line:
javascript_include_tag "application"
The jquery and jquery_ujs files come with the jquery-rails gem which is in the default Rails 3.1 Gemfile.
The //= require line in that file tells Sprockets that you want to require a file which in this case would be jquery.js from within jquery-rails, where the //= require_tree . will require all other JavaScript files in the same directory as application.js and concatenate them all into one file.
You can read more about the asset pipeline here.