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.
Related
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
});
I'm having a problem with two Javascript files used by Isotope (http://isotope.metafizzy.co/) in my /app/assets folder not being found on Heroku. In development mode locally, they are found and everything works fine. However once in production mode on Heroku, the two files aren't there. I've read a lot of similar posts on Stack Overflow and read a lot about the asset pipeline, but I still can't seem to figure out what's causing the problem.
Here's what I know:
1) Other Javascript files in my /app/assets folder are being found, including Bootstrap.
2) If I do rake assets:precompile -trace, I don't get any errors and everything seems normal.
3) In my production.rb file, config.serve_static_assets = true. A lot of people seemed to switch this from false to true and it fixed their issue, but at this point I'm not sure which it should be.
4) This issue might be due to the Isotope Javascript files in question. In one of my html.erb files, I have added some Javascript to do with Isotope as per the developer's docs, like this:
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#eventcontainer');
$container.imagesLoaded(function(){
$container.isotope({
layoutMode : 'spineAlign',
spineAlign: {
gutterWidth: 30
},
itemSelector : '.element',
});
});
....... more here that works in dev mode...
</script>
I think the problem results from these two lines:
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
Since if I remove them, my app can't find the Javascript files even when running in development. However, they are included in my application.js file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery-1.7.1.min
//= require jquery.isotope.min
//= require bootstrap-datepicker
//= require bootstrap-timepicker
//= require_tree .
//= require_self
so I'm not sure why they aren't being found or how to fix the problem. I'm fairly new to Rails and especially to Heroku, so I would really appreciate any help. If you need more info or to see any other files, please let me know.
Thanks for your time!
I was able to resolve this by removing the lines
<script src="../assets/jquery-1.7.1.min.js"></script>
<script src="../assets/jquery.isotope.min.js"></script>
and using info found here: Rails/Heroku precompiled assets not being found. Specifically, the following:
The side note is especially important: "If a
public/assets/manifest.yml is detected in your app, Heroku will assume
you are handling asset compilation yourself and will not attempt to
compile your assets."
Be sure that you remove everything under your public/assets/* folder
that the precompile has created, including that manifest.yml file.
After removing everything in public/assets/* by doing a bundle exec rake assets:clean, I then pushed to Heroku again, allowing it to compile assets itself. At that point it worked. I'm not entirely sure the reasoning, maybe someone could explain it, but to me it seems like once those two lines were removed and all the assets were recompiled, it knew to look in the correct location for the Isotope Javascript files.
My app has twio different user interfaces, one called when invoked by a standard browser on a PC and a different one when invoked by a mobile device.
So in my assets directory I have
assets
javascripts
application.js
mobile
application.js
stylesheets
application.css
mobile
application.css
mobileapp.css
....
....
views
layouts
application.html.erb
application.mobile.erb
manifest files are:
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_directory .
javascripts/mobile/application.js
//= require jquery.mobile
//= require_directory .
stylesheets/application.css
*= require_self
*= require_directory .
*/
stylesheets/mobile/application.css
*= require jquery.mobile
*= require_directory .
*/
All works ok in development, BUT...
as soon as I go to production mode (Apache/Passenger) when I invoke the app with a mobile device I see that the mobile application layout is used, but syles contained in mobile/mobileapp.css are not used.
I have no way to debug on mobile devices (no firebug or google chrome developer tools).
Is there any way to know what is being served by passenger to the mobile device? I know, I can always use wireshark to sniff network packets, but should it exist some higher level tool I'd be grateful..
EDIT
Maybe now I've figured out what is causing the problem.
I know that jquery mobile does its "magic"just after the DOM is loaded.
When the app is served by passenger (after precompiling assets) to a mobile device,
the correct page and the correct application layout are served, but Jquery mobile does not initialize all its elements at DOM load, so my pages remain in a "hybrid" state.
Anyone who had this kind of problem and solved it?
Well, it's not the first time that I ask a question and then I also post an answer, having not received any answer yet...
To capture the HTML code of the page i would receive on a mobile device without having tools like Firebug for mobile platform I simply launch from command line the following:
curl -A android http://www.mysite.com/mypage
I use the ability of cURL to send an http request where I control the user-agent that is being sent.
Not like having Firebug but now I know whichj HTML is actually sent to the mobile device.
I have a Rails 3.2.9 app using jquery mobile.
I use the jquery_mobile_rails gem to embed jqm and the mobylette gem to detect when requests come from a mobile device.
All works ok in development environment (Webrick)
The production env is based on apache/passenger.
when I run rake assets:precompile all seems to go well,
and if I look at assets/manifest.yml I can see that all seems ok.
When I invoke the welcome page the login form is sent to the browser,
but while in development env the page has all the jqm formats,
in production the html is not "injected" with the needed JQM code,
so for example the tag is simply
<body>
instead of
<body class="ui-mobile-viewport ui-overlay-c">
So it seems that after loading the page, the javascript that should run and "enrich" the html with JQM specific code is not triggered.
Any hint about why this is happening?
EDIT
assets
javascripts
application.js
mobile
application.js
views
layouts
application.html.erb
application.mobile.erb
manifest files are:
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_directory .
javascripts/mobile/application.js
//= require jquery.mobile
//= require_directory .
In case you would like to include a bunch of files from a particular directory (or a library ) ,you can use index manifest file (look for 2.1.2). It is really simple:
in your directory (app/assets/javascripts/mobile) create a file index.js with content :
//= require_self
//= require other_files_you_want
(and optionaly):
//= require_tree .
then in your application.js manifest file you can require the library with the name of the directory , in which you have created the index.js file :
//= require mobile
I would suggest, when you pass these steps, to remove the file app/assets/javascripts/mobile/application.js. It is not a good style in one app to have more than one file with the name application.js.
EDIT (after taking a look at the application.css):
I would suggest a couple of corrections in your manifest file application.css:
move the css code in a new file (for example app/assets/stylesheets/custom.css.scss)
if there are others css libs that you use , include them like normal (*= require your_css) in your application.css.
The problem was due to an incompatibility between the last versions of jquery and jquery mobile.
jquery mobile 1.2.0 released Oct 2 2012 has problems with last jquery version 1.9.x.
Specifically, jquery 1.9 removed the $.browser method, which is used in jquery mobile 1.2.0.
So when jqwery mobile tries to initialize objects on the page it dies with the error
TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
I solved the problem by forcing the use of jquery 1.8.3; in Gemfile
gem 'jquery-rails', '~> 2.1.4'
which includes jquery 1.8.3 in the assets pipeline.
Without web inspector on the BB Z10 (or remote debug function on android 4 devices) I would have never been able to detect such javascript problem on the mobile platform.
As a final tought, BlackBerry Z10 Web Inspector works via Wi-Fi, while Android devices need an USB connection to have remote debug work.
When using asset pipeline in rails 3.1, it creates a default application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
but when will I need include all of my javascript? In most cases we use different javascrips for different controllers/views?
require_tree . will result in you having a single file (application.js in this case) holding all your scripts that is there in the folder. And the fact that browsers will only pull that file once from your web server (unless you do a Ctrl + R refresh or there is a change in file cache property), does make the apps behave faster for subsequent requests.
Unless of course you have an application that have quite varying and huge scripts and a typical user is not expected to move around much that he wouldn't need majority of those. Which obviously is not very common case.
for additional and detailed information. look here
http://guides.rubyonrails.org/asset_pipeline.html
Browser loads application.js once and then gets it from cache.
//= require_tree . loads the every file or sub folder file within the javascript directory