There are two pieces of my application that seem to require that I load my javascript at different points.
Omniauth works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' within <head></head>.
Shubox (js library used to upload photos) works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' just before </body>.
Each of the two does not work when the javascript is loaded where the other requires. So, if I place the javascript line at the end of the body, omniauth does not work.
I can provide additional information if needed. Thank you in advance.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
application.html.erb
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body data-shubox="<%= Rails.application.credentials.dig(:aws, :secret_access_key) %>">
<% if flash.any? %>
<% flash.each do |key, value| -%>
<section class="flash flash__<%= key %>"><%= value.html_safe %></section>
<% end -%>
<% end %>
<%= yield %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</body>
</html>
Because of Turbolinks your application.js needs to be in the head tag, otherwise it is evaluated twice . This can cause a problem with libraries that expect your DOM to be loaded when you initialize them - which I think is your problem with shubox.
So you should put something like this in your application.js (if you are using Turbolinks 5, for earlier version the event is called page:load)
$(document).on('turbolinks:load',() => {
new Shubox('#avatar', { key: "abcde-qwerty-12345" })
}
);
You can always create 2 packs if you need them in different places:
javascript/packs/the_one_with_turbolink.js
javascript/packs/the_one_with_shubox.js
then you can do
javascript_pack_tag :the_one_with_turbolinks
and
javascript_pack_tag :the_one_with_shubox
Related
I have gone through this article to install bootstrap in ruby-on-rails app.
And I noticed that there are stylesheet_link_tag and stylesheet_pack_tag for css. I wonder why both is needed, isn't one is enough in app/views/layouts/application.html.erb?
<head>
<title>BootstrapDemo</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
stylesheet_pack_tag 'application' is a webpacker helper method, it loads styles that are imported in app/javascript/packs/application.js. If you set up bootstrap in app/javascript/ then pack tags are required.
stylesheet_link_tag 'application' is a sprockets helper method, it loads styles from app/assets/stylsheets/application.css. If you don't use that file for anything then stylesheet_link_tag can be removed.
app/
assets/ # used by sprockets aka rails asset pipeline
stylesheets/
application.css # stylesheet_link_tag 'application'
javascripts/
application.js # javascript_include_tag 'application'
javascript/ # used by rails webpacker
packs/
application.js # javascript_pack_tag 'application'
# stylesheet_pack_tag 'application' # => includes 'styles.css'
stylesheets/
styles.css # must be imported in packs/application.js
I've got a Rails app that repeats packages if I go back to the page that's supposed to render them.
For instance, my OwlCarousel with two images will multiply and have the carousel navigation superimposed on top of the previous one.
Brief GIF to explain
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
#app/javascript/packs/application.js
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
require("jquery");
import '#popperjs/core'
//Owl Carousel
import "../js/owlcarousel"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"
$( document ).on('turbolinks:load', function() {
$(function () {
$('.owl-carousel').owlCarousel(
{
items: 1,
loop: true,
autoplay: true
}
);
});
})
#owl carousel is simply called like this:
<div class="owl-carousel owl-theme owl-theme-dark">
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
</div>
I think maybe OwlCarousel has a way to destroy itself before reloading, which I could add in owlcarousel.js but I think that would be a way to "patch" an ongoing issue. Is this supposed to happen?
Issue persits
If anyone reads the post in the future, this was the solution I found.
Simply add:
#in app/views/layouts/application.html.erb
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
I couldn't make it work for specific view, so I simply did it for every view in the app. If anyone knows how to implement it directly within a view, I'm interested.
I'm not an expert when it comes to rails, my app was working fine but suddenly when i reload any page, at the first milliseconds it shows no compiled css and then everything is fine .
I don't how to explain it really well but it bugs me every-time i reload the page .
Anyone have encountered this problem or have a fix to it ?
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'shared/flash_messages' %>
<%= render 'shared/navbar' %>
<main class="container-fluid">
<%= content_for?(:content) ? yield(:content) : yield %>
</main>
</body>
</html>
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("stylesheets/application")
import "bootstrap"
app/javascript/stylesheets/application.scss
$theme-colors: (
"primary": #4299E1,
// Gray colors
"gray-100": #F7FAFC,
"gray-200": #EDF2F7,
"gray-300": #E2E8F0,
"gray-400": #CBD5E0,
"gray-500": #A0AEC0,
"gray-600": #718096,
"gray-700": #4A5568,
"gray-800": #2D3748,
"gray-900": #1A202C,
// Blue Colors
"blue-100": #EBF8FF,
"blue-200": #BEE3F8,
"blue-300": #90CDF4,
"blue-400": #63B3ED,
"blue-500": #4299E1,
"blue-600": #3182CE,
"blue-700": #2B6CB0,
"blue-800": #2C5282,
"blue-900": #2A4365,
// Red colors
"red-100": #FDEEEE,
"red-200": #FAD4D5,
"red-300": #F7B9BB,
"red-400": #F28589,
"red-500": #EC5156,
"red-600": #D4494D,
"red-700": #8E3134,
"red-800": #6A2427,
"red-900": #47181A,
// Green colors
"green-100": #EFF9F4,
"green-200": #D7F1E4,
"green-300": #BEE9D4,
"green-400": #8ED8B3,
"green-500": #5DC793,
"green-600": #54B384,
"green-700": #387758,
"green-800": #2A5A42,
"green-900": #1C3C2C,
);
#import '~bootstrap/scss/bootstrap';
The problem was with webpacker i was using bootstrap with webpacker, instead i have switch to the bootstrap-rubygem and it's working well .
Im doing a project from scratch and getting an anoying error that Im dealing without sucess.
Im trying to add a JS file to a page not having sucess.
Those are my files:
#application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
And my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require welcome
//= require_tree .
My welcome.js inside /assets/javascripts:
#/assets/javascripts/welcome.js
$(document).ready(function(){
$('#present').mouseenter(function(){
alert("MouseEnter!"); // This will create an alert box
console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
$(this).fadeIn('fast',1);
});
$('#present').mouseleave(function(){
alert("MouseLeave!"); // This will create an alert box
console.log("MouseLeave!");
$(this).fadeIn('fast',0.5);
});
});
When I run the root page the JS is being shown looking at the inspector. But looks empty (i dont know if this is something usual)
src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"
If I open it using the browser it shows:
(function() {
}).call(this);
Well. Someone know what can I do to make my Javascript works?
Thanks
change your code in your application.html.erb
from:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
to this:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I am trying to load a simple vue module in my layout application file
but the app is failing to load the module. I am using the webpacker gem with rails 5.1.1. and ruby version 2.3.3
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Potato</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
</head>
<body>
<%= yield %>
</body>
</html>
The hello_vue.js file (see code below) is located in the javascript/packs directory and it's importing a very basic hello.vue file also located the same directory:
import Vue from 'vue'
import App from './app.vue'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('hello'))
const app = new Vue(App).$mount('hello')
console.log(app)
})
I've tried to restart the rails server and the webpack-dev-server but nothing...
the app seems just to ignore the file.
I've generated a controller Pages with an index action and now it's working...