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
Related
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 trying to display a very simple app from codecademy and this is the error I'm getting in my browser:
PagesController#welcome is missing a template for request formats: text/html
NOTE!
Unless told otherwise, Rails expects an action to render a template with the same name,
contained in a folder named after its controller. If this controller is an API responding with 204 (No Content),
which does not require a template, then this error will occur when trying to access it via browser,
since we expect an HTML template to be rendered for such requests. If that’s the case, carry on.
My directory
pages_controller.rb
class PagesController < ApplicationController
def welcome
end
end
routes.rb
Rails.application.routes.draw do
root ‘pages#welcome’
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
welcome.html.erb
<h1>Hello</h1>
Running 'rails server' and getting the above error in my browser. As far as I can tell the files are in the right place and of the right type ... Rails v 6.0.1
Apparently the issue was that my project was in a folder the title of which had a space in it.
After moving the project to a different folder it now works.
This is on rails 6.0.1
I deleted my controller and view that had the issue and the auto-generated the controller and view with
rails g controller controllername new create
I'm trying rails/turbolinks 3, and want to make partial replacement work, but no luck with that. Here is code:
gemfile
gem 'turbolinks', github: 'rails/turbolinks' (shows using 3.0.0 so problem not in that, turbolinks included in app..n.js).
router:
root 'home#index'
get '/partial1' => 'home#partial1', as: 'partial1'
get '/partial2' => 'home#partial2', as: 'partial2'
controller
class HomeController < ApplicationController
def index
end
def partial1
render change: 'partial1'
end
def partial2
render change: 'partial2'
end
end
layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Turbo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div>
this is home
<%= link_to("partial asd1", partial1_path) %>
<%= link_to "partial 2", partial2_path%>
</div>
<div id="partial1" data-turbolinks-temporary>
<p>her</p>
</div>
<div id="partial2">
<p>here is partial</p>
</div>
<%= yield %>
</body>
</html>
But it doesn't replace those partials, it works just as regular. I also tried to put turbolinks: true and it renders Turbolinks.replace('some html', {change: ['partial1']}), but also nothing happens. I also tried e.preventDefault and Turbolinks.visit('/partial1', {change: 'partial1'}), and it also not working as well as calling Turbolinks.replace('some html', {change: 'partial1'}). Turbolinks js loads in browser all right. And in dev it shows calling Turbolinks.visit. Tried on different machines.
If anyone made it work please tell me how you did it.
I have a rails 4 project that has some public routes (home, contact, about) and then some routes that are only for logged in users that are name spaced under admin (admin/home, admin/contact, admin/about). The admin routes basically edit and update what is displayed in the public routes.
I have an admin layout for the admin routes and a application layout which does the normal public routes. My admin layout has to have data-no-turbolink in the body because I NEED to disable turbolinks in order for the CKEditor gem to work properly.
Each layout has a link that shows up if a User is logged in. So if a user is logged in and visits "localhost:3000/" or "http://localhost:3000/contact" etc, there will be a link that will link to the admin page.
Likewise if a logged in user visits "http://localhost:3000/admin/home" or "http://localhost:3000/admin/contact" there will be a link that links to the public page. Here is what the layouts look like.
ADMIN LAYOUT
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
</head>
<body data-no-turbolink>
<div class="page-wrap">
<header id="main-head">
<%= render "nav"%>
</header>
<% if logged_in %>
<div id="review-default"><%= link_to "Preview Pages As A Regular User.", root_path %></div>
<% end %>
<%= yield %>
</div>
</body>
</html>
APPLICATION LAYOUT
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="page-wrap">
<header id="main-head">
<%= render "nav"%>
</header>
<% if logged_in %>
<div id="review-admin"><%= link_to "Return to Admin Panel.", admin_home_path %></div>
<% end %>
<%= yield %>
</div>
</body>
</html>
My problem is that when I click from say the root path "/" to "admin/home" the forms that CKEditor is applied to dont display properly until I refresh the page, which leads me to think that they are not displaying properly because turbo links are not disabled.
But when I, for example, log in and get directed to the adminroutes they are disabled. But they dont seem to be when I am linked to them from the links in the layout...
I hope that makes sense.
What am i doing wrong and how do I stop turbo links from being applied to my admin routes?
EDIT
my solution was to add
<% if logged_in %>
<body data-no-turbolink>
<% else %>
<body >
<% end %>
to both my admin and application layouts. This solves my problem, but if anyone has a more elegant solution (since if the admin layout is being called correctly by having layout "admin" in my admin controller it doesn't seem like I would have to do this), I am all ears!
BTW, I love you StackOverFlow. Thank you for all your patience and help.
my solution was to add
<% if logged_in %>
<body data-no-turbolink>
<% else %>
<body >
<% end %>
to both my admin and application layouts. This solves my problem, but if anyone has a more elegant solution (since if the admin layout is being called correctly by having layout "admin" in my admin controller it doesn't seem like I would have to do this), I am all ears!
I follow the Ruby on Rails tutorial by Michael Hartl and I'm stuck with an example that is not working for me.
I try to remove duplicate code from .erb files so that the code exists only in the application.html.erb file. With the old home.html.erb file everything works out well (when I do a GET for home the content is shown), but with the one I am supposed to use to eliminate duplicate code, no content is shown. After testing, I found out that even removing the title tag from the old file is enough to make the content dissapear.
Any ideas why that is happening? Is the tutorial wrong or did I miss something?
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Title | <%= yield(:title) %></title>
<title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
home.html.erb
<% provide(:title, 'Home') %>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
old home.html.erb:
<% provide(:title, 'Home') %>
<!DOCTYPE html>
<html>
<head>
<title>Title | <%= yield(:title) %></title>
</head>
<body>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
</body>
</html>
The problem with your layout file is that you have two <title> tags, one containing the title of your application, and one left open. If you remove the one left open, the problem will be resolved.
You should fill in the application layout in the controller. In other words, add layout 'application' to your controller. For example:
class StaticPagesController < ApplicationController
layout 'application'
def home
end
def help
end
def about
end
end