I was under the impression that if you had file named application.html.erb in your layouts directory that this layout would be applied automatically to all views without having to explicitly refer to it.
This doesn't appear to be the case.
I have one 'home' controller and it has one 'index' method:
class HomeController < ActionController::Base
def index
end
end
and the related home.html.erb view page:
<h2>Welcome!</h2>
<div>Stay tuned for basic functions to start arriving on this site.</div>
<div>The site will not look very stylish until one of the bounties gets done about writing the Style guide.</div>
and finally the application.html.erb file located in layouts:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<%= stylesheet_link_tag "application", media: "all" %>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
Categories
</div>
</div>
<%= yield %>
<div class="footer">Michael</div>
</body>
</html>
The above file was ignored until I added an explicit reference to the layout in my home controller like this:
class HomeController < ActionController::Base
layout 'application'
def index
end
end
What gives? I don't want to have to name the layout I am using in every controller. That was the point of having it at the application level.
The issue is you are inhering from ActionController::Base. You need to subclass from ApplicationController to ask Rails to use "application" layout as the default.
class HomeController < ApplicationController
def index
end
end
Related
I am trying to add the toastr gem to my Rails 6 project. I also have the devise gem installed.
I do not understand webpacker and how to make toastr-rails webpacker friendly.
I have read all the documentation. Don't tell me to read the documentation.
This is what I've tried:
yarn add toastr
Then in my assets/packs/application.js file, I added:
#import 'toastr'
And in my assets/stylesheets/application.scss file, I added:
*= require_toastr
Finally my layouts/application.html.erb has this code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<% unless flash.empty? %>
<script type="text/javascript">
<% flash.each do |f| %>
<% type = f[0].to_s %>
toastr['<%= type %>']('<%= f[1] %>');
<% end %>
</script>
<% end %>
<%= yield %>
</body>
</html>
I don't get the toast notifications.
I don't get any notifications.
But this code works on my Rails 4 project.
If you want to add toastr with toastr-rails gem, use asset pipeline instead of webpack.
Here are the steps to add toastr with the webpack.
Add toastr js with yarn
yarn add toastr
Require toastr in app/javascript/packs/application.js. I added it to the global to avoid errors
global.toastr = require("toastr")
Create app/javascript/stylesheets/application.scss file to import custom or library css files
Import toastr css in app/javascript/stylesheets/application.scss
#import 'toastr'
Import app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js
import "../stylesheets/application"
I wrote a helper method for flash messages. Add this method to application_helper.rb or another helper
def toastr_flash
flash.each_with_object([]) do |(type, message), flash_messages|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
text = "<script>toastr.#{type}('#{message}', '', { closeButton: true, progressBar: true })</script>"
flash_messages << text.html_safe if message
end.join("\n").html_safe
end
Add toastr_flash method to layouts/application.html.erb or wherever you want
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%= yield %>
<%= toastr_flash %>
</body>
</html>
first you need to add toastr to your project
using yarn
yarn add toastr
using npm
npm -i toastr
after that you can see in your node_modules the file toastr (node_modules/toastr) inside that have the toastr.scss file and toastr.js file, well let's import it
app/assets/application.scss
#import "toastr/toastr";
app/javascripts/packs/application.js
toastr = require("toastr")
or
import toastr from 'toastr/toastr';
I've developed a simple web page with angularjs and spring framework.
I tried to make the web page using angular route so that web page work as SPA.
Here's my simple main jsp file. The page is shown when I access to 'http://localhost:8080/test' on the chrome.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page session="false" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script>
angular.module("app", ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "controller"
})
})
.controller("controller", function() {
});
</script>
</head>
<body ng-app="app" ng-controller="controller as main">
<ul>
<li>HOME</li>
</ul>
<ng-view></ng-view>
<div ng-view></div>
</body>
</html>
I want to put the home.html into <ng-view> or <div class="ng-view"> when I click the 'HOME' link without page refresh but it's not working.
What's the problem with the code?
To get it to work change href="#/home" to href="#!home"
Also, make sure home.html is in the /src/main/resources/static/ directory
I would prefer to use .html with Thymeleaf instead of .jsp
Read
Integrating JSP with AngularJS, Is it a concern in real world...Beginer in Angular JS
https://spring.io/blog/2015/08/19/migrating-a-spring-web-mvc-application-from-jsp-to-angularjs
I want to have a blue background on one page of my rails application and all other pages to have a white background. How can I do this? I tried doing
<%= javascript_include_tag params[:controller] %> or
<%= stylesheet_link_tag params[:controller] %>
By following this tutorial but I couldn't get it to work.
on way of doing this is rendering a different layout on that page
on your controller
def something
render :layout => 'new_layout'
end
you can also pass a yeald block to over right the css on that pge
in your layout file
<%= stylesheet_link_tag %>
<%= yield(:head) %>
on the view you want to update
<% content_for :head do %>
<style>
body {
background-color: #b0c4de;
}
</style>
<% end %>
You can add class to body according to controller
In Layout File,
<body class="<%= params[:controller]%>">
In CSS,
body.controller_name {background-color : blue;}
I am quite new to Ruby on Rails and wanted to place my custom CSS file into the Devise (Sign Up View). I placed my global CSS into the application.js (Asset Pipeline) and placed 2 Helper functions in my
helpers/application_helper.rb
def javascript(*files)
content_for(:head_javascript) { javascript_include_tag(*files) }
end
def stylesheet(*files)
content_for(:head_stylesheet) { stylesheet_link_tag(*files) }
end
and my views/layouts/application.html.erb
<!DOCTYPE html>
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
<html>
<head>
<title>Mysite</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= yield(:head_stylesheet) %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield(:head_javascript) %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= yield %>
</body>
</html>
Then I generated the Devise Views and adjusted my twitter bootstrap form
rails generate devise:views
And now want to place my signup.css inside the Signup View, but how?
So I created the Devise Controllers, to use my helper methods:
bash <(curl -s https://raw.github.com/foohey/cdc/master/cdc.sh)
Now I am stuck, because I my helpers don´t work with:
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
Is there an easy way in rails to handle custom css files? I am new to the asset pipeline concept and it is a bit confusing.
Thanks for help.
Have you heard about content_for? It is really useful for things like that. Inside you layout add:
<%= yield :head %>
inside your head tag. Then you can write the following inside the view (devise/sessions/new):
<% content_for :head do %>
javascript 'theme/signup'
stylesheet 'theme/signup'
<% end %>
This will perfectly separate your layout from single view concerns, and it should also fix the problem you're having.
You can place your custom css files in the css directory inside the public directory and inside the <head> tags of the view you want the custom css files to be you do this
<%= stylesheet_link_tag '/css/signup' %>
The signup.css will only be available to the signup view assuming that's where you place your stylesheet_link_tag
I think you want something like these:--
<% if (controller.controller_name == "sessions") && (controller.action_name == "new")%>
<%= stylesheet_link_tag "theme/signup"%>
<%= javascript_include_tag "theme/signup" %>
<% end %>
I'm trying to follow along with this Sinatra tutorial (from 2008): http://devver.wordpress.com/2008/11/25/building-a-iphone-web-app-in-under-50-lines-with-sinatra-and-iui/
But ran into some problems with the code, for me the files aren't listed under the main heading currently. When I change dir to "./public/files/" the list is shown, but clicking a file's link results in an error page ("Sinatra doesn't know this ditty"). If I remove the public from the URL it will in this case work. How can I resolve the two?
Also, I get an error if with the line "use_in_file_template!", which I just comment out.
And I'm not familiar with CSS, so could someone tell me where I can the color of the text?
require 'rubygems'
require 'sinatra'
require 'pathname'
get "/" do
dir = "./files/"
#links = Dir[dir+"*"].map { |file|
file_link(file)
}.join
erb :index
end
helpers do
def file_link(file)
filename = Pathname.new(file).basename
"<li><a href='#{file}' target='_self'>#{filename}</a></li>"
end
end
use_in_file_templates!
__END__
## index
<html>
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">#import "/stylesheets/iui.css";</style>
<script type="application/x-javascript" src="/javascripts/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
</div>
<ul id="home" title="Your files, sir." selected="true">
<%= #links %>
</ul>
</body>
</html>
Well, sinatra (as many other web servers) assumes that public is a root directory for static files and it just does not use it when accessing files/dirs in it. So, in your case, you could change (add public to path when get list of files and remove it when generate links to them) some lines in your code:
get "/" do
dir = "public/files/"
#links = Dir[dir+"*"].map { |file|
file_link(file)
}.join
erb :index
end
helpers do
def file_link(file)
filename = Pathname.new(file).basename
"<li><a href='#{file.sub('public','')}' target='_self'>#{filename}</a></li>"
end
end