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.
Related
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
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 .
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...
I felt confused about the Rails layout. I have the home and video page, and I want to include their css and js relatively.
Therefore, after I used scaffold to create video, I created video.css and video.js.
Furthermore, I created a file in view/layouts/video_layout.html.erb and put the following code into it.
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'video', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'video', 'data-turbolinks-track': 'reload' %>
</head>
<body>
VIDEO BEGIN
<%= yield %>
VIDEO END
</body>
</html>
I thought it will include only video.css and video.js. However, when I accessed localhost:3000/videos, the video page was still in original condition (no VIDEO BEGIN and VIDEO END )
add the following line to app/controllers/videos_controller.rb
layout "video_layout"
eg
class VideosController < ApplicationController
layout "video_layout"
def index
end
....
end
also check this http://api.rubyonrails.org/classes/ActionView/Layouts.html
My rails app is styled with Bootstrap delivered from a CDN. It works fine in development but the styling is lost after uploading to Heroku. I don't have any bootstrap gems in the gemfile. Here is a screen shot of my appplication.html.erb file.
<!DOCTYPE html>
<html>
<head>
<title><%= page_title %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<%= render "layouts/header" %>
<%= flash[:notice] %>
<%= flash[:alert] %>
<div id="main">
<%= render "layouts/left_sidebar" %>
<div id="body"><%= yield %></div>
<%= render "layouts/right_sidebar" %>
</div>
</body>
</html>
I am not sure about the info inside the head tags, maybe it is incorrect or should I add a gem? I am not sure what to do. Please help. Thanks in advance.
Not sure if it's causing the problem, but the protocol for one of your Bootstrap links is http and the other is https. You might check your console for load errors.
Since you mentioned the gem, adding this to your Gemfile should do the trick:
gem 'anjlab-bootstrap-rails', '~> 3.0.0.3', :require => 'bootstrap-rails'
I have three apps on Heroku running Bootstrap with this gem and it has never given me any trouble.