I have this piece of code in my index.html that includes EJS in the head:
<%= (#meta_tags || {}).each do |name, val| %>
<meta name="<%= name %>" content="<%= val %>">
<%= end %>
<title>Dashboard</title>
<%= favicon %>
<%= csrf_meta_tag %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Oswald:400,500&display=swap"%>
<%= stylesheet_link_tag current_stylesheet_url %>
Until Angular 11 it was compiling perfect. After I recently updated to Angular 12, this is what I'm getting in the public/index.htm file:
</head><body><%= (#meta_tags || {}).each do |name, val| %>
<meta name="<%= name %>" content="<%= val %>">
<%= end %>
<title>Dashboard</title>
<%= favicon %>
<%= csrf_meta_tag %>
<%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Oswald:400,500&display=swap"%>
<%= stylesheet_link_tag current_stylesheet_url %>
These are my angular compiler options:
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": true,
"aot": true,
"buildOptimizer": true,
"extractLicenses": true,
"vendorChunk": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
What configuration am I missing so that I can correctly compile my EJS in the index.html file again as I was normally doing in previous versions of angular?
Thanks!
Related
A working form with recaptcha moved from rails6 to rails7 always arises a recaptcha validation error at first submit. On second submit it works.
= form_with url: mail_submit_path do |form|
= render partial: "err_details", locals: {field: :email}
.field
%label.label email
.control.has-icons-left
= form.text_field :email, value: #email, required: true, class: "input"
%span.icon.is-left
%i.fas.fa-envelope{:'aria-hidden' => "true"}
= render partial: "err_details", locals: {field: :captcha}
.field
.recaptcha
= recaptcha_tags
.field
.control
= form.submit "Submit", class: "button is-link"
On first submit some data is missing: from the rails logs:
I, [2022-01-18T18:42:23.795409 #1451245] INFO -- : [3c877c6c-5a2a-46e5-8ff6-5338c36d1078] Parameters: {"authenticity_token"=>"[FILTERED]", "email"=>"someone#gmail.com", "g-recaptcha-response"=>" ", "commit"=>"Submit"}
I would think it is a turbo issue, but not sure.
I was having the same issue in Rails 6.1.4. For some reason, changing
<%= recaptcha_tags %>
to
<%= recaptcha_tags(noscript: false) %>
worked for me.
I'd also like to add that I've had more success disabling Turbo for forms using recpatcha tags.
<%= form_with(model: #resource, local: true, data: { turbo: "false"}) do |f| %>
I am starting a new Rails 7 app and recently found out that we can't use ujs anymore :( I found a plugin called mrujs which is working correctly to send my forms remotely to the server. I am also using stimulus to handle various javascript functions on the page.
The issue that I'm having is my response back after ajax:success processes is not iterable:
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
Below is my HTML, Rails, and Stimulus Code:
HTML
<%= form_with model: Article.new, html: { data: { remote: true, type: "html", "action": "ajax:success->modal-forms#onPostSuccess ajax:error->modal-forms#onPostError" } } do |f| %>
<%= f.label :title, "Article Title" %>
<%= f.text_field :title, class: "form-control" %>
<%= f.submit "Save Article", class: "btn btn-primary" %>
<% end %>
Ruby / Rails
def create
#article = Article.create(article_params)
if #article.errors.any?
render partial: 'error', article: #article, status: :bad_request
else
render #article
end
end
This returns a basic html page that would be inserted into another location within the page.
<li><%= #article.title %></li>
Stimulus Action
onPostSuccess(event) {
event.preventDefault()
const [data, status, xhr] = event.detail
// This is where I get the issue of 'Not Iterable'
}
event.detail gives me the not iterable error. Does anyone know how I can get my response from rails to be formatted so the [data, status, xhr] section will actually work?
If hotwire or turbo is needed for this an example would be extremely helpful :)
Thanks
Eric
This may not be the correct way but it does work:
html
<div data-container="remote">
<%= form_with model: Person.new, html: { data: { "action": "submit->remote#submit" } } do |f| %>
<%= f.text_field :first_name %>
<%= f.submit :submit %>
<% end %>
</div>
peole rails controller
def create
#person = Person.new(person_params)
if #person.save
render json: #person
else
render partial: 'people/person', locals: { person: #person }, status: :unprocessable_entity
end
end
remote stimulus controller
submit(event) {
event.preventDefault()
fetch(event.target.action, {
method: 'POST',
body: new FormData(event.target),
}).then(response => {
console.log(response);
if(response.ok) {
return response.json()
}
return Promise.reject(response)
}).then(data => {
console.log(data)
}).catch( error => {
console.warn(error)
});
}
I have a rails 6, tailwind app and it works fine in development.
But when I push it to heroku, the asset compilation seems not to work.
The result is that there is no CSS in the production app.
I managed to replicate the same error on my local machine by doing:
RAILS_ENV=production bundle exec rake assets:precompile
Then I also have no css shown on my local app.
When I then do
RAILS_ENV=development bundle exec rake assets:precompile
it works again.
here is my bin/webpack file:
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "bundler/setup"
require "webpacker"
require "webpacker/webpack_runner"
APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
Here is my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= flash[:alert] %>
<%= flash[:notice] %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
Here is my postcss.config.js
let environment = {
plugins: [
require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
};
// Add everything below!
if (process.env.RAILS_ENV === 'production') {
environment.plugins.push(
require('#fullhuman/postcss-purgecss')({
content: [
'./app/**/.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/javascript/**/*.jsx',
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
)
}
module.exports = environment;
And here is my tailwind.config.js
module.exports = {
purge: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['Inter var'],
},
},
},
variants: {
extend: {},
},
plugins: [],
}
And my package.json
{
"name": "myapp",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.2.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"turbolinks": "^5.2.0",
"webpack": "^4.0.0"
},
"version": "0.1.0",
"devDependencies": {
"autoprefixer": "^9",
"postcss": "^7",
"webpack-dev-server": "^3.11.2"
},
"workspaces": {
"nohoist": [
"**/tailwindcss",
"**/#tailwindcss/**"
]
}
}
I am trying to customize Spree_i18n frontend nav-bar locale and am having some issues changing it from a select_tag to a link_to. I am trying to make it appear with only two locales selections EN/CN. What would the best solution for this be?
locale.js
load = function() {
return $('#locale-select select').change(function() {
return $.ajax({
type: 'POST',
url: $(this).data('href'),
data: {
locale: $(this).val()
}
}).done(function() {
return window.location.reload();
});
});
};
navbar.html.erb
<li id="locale-select" data-hook>
<%= form_tag set_locale_path, class: 'navbar-form' do %>
<div class="form-group">
<label for="locale" class="sr-only"><%= t(:'i18n.language') %></label>
<%= select_tag(:locale, options_for_select(supported_locales_options, I18n.locale), class: 'form-control', data: { href: set_locale_path }) %>
<noscript><%= submit_tag %></noscript>
</div>
<% end %>
</li>
My custom variant
<%= link_to 'en', spree.set_locale_path(switch_to_locale: :en), method: :post %>
Below is my code in full for both the application controller and the application.html.erb, I really can't work this out, what is wrong?! this accepts standard values in the high chart, for example, just straight numbers but once I try to call values stored in the array it rejects it. I don't know why. Thanks
class ApplicationController < ActionController::Base
require 'nokogiri'
require 'open-uri'
protect_from_forgery
before_filter :set_locale
def index
#doc= Nokogiri::XML(open("http://api.worldbank.org/countries/BRA/indicators/1.0.HCount.2.5usd?per_page=10&date=1960:2014"))
m = #doc.xpath("//wb:value").collect(&:text)
#values = Array.new
m.each do |m|
#values << m
end
end
end
complete application.html.erb code below:
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Brazil Poverty Headcount'
},
subtitle: {
text: 'Source: WorldBank.com'
},
xAxis: {
categories: [
'2009',
'2008',
'2007',
'2006',
'2005',
'2004',
'2003',
'2002',
'2001',
]
},
yAxis: {
min: 0,
title: {
text: 'X-Axis Data'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Brazil',
data: <%=#values.inspect%>
}]
});
});
</script>
</head>
<body>
<div style= "margin:50px">
<div id="container" style="min-width: 310px; height: 600px; margin: 15 auto"></div>
<div id ="signing" style="width:200px; height:200px; float:right;">
<% if current_user %>
Logged in as <%= current_user.email %>
<%= link_to "Log Out", logout_path %>
<% else %>
<%= link_to "Sign Up", signup_path %>
<%= link_to "Log In", login_path %>
<% end %>
</div>
<div id="admin" style="width:100px; height:100px; float:right;">
<%= link_to "Admin", new_admin_user_session_path %>
</div>
<div>
Language:
<%= link_to_unless_current "English", locale: "en" %> |
<%= link_to_unless_current "Spanish", locale: "sp" %>
</div>
<%= yield %>
</div>
</body>
</html>
I have actually deployed your app and try the following.
Create controller chart:
rails g controller chart
Edit app/controllers/chart_controller.rb and add the following:
def index
#doc = Nokogiri::XML(open("http://api.worldbank.org/countries/BRA/indicators/1.0.HCount.2.5usd?per_page=10&date=1960:2014"))
m = #doc.xpath("//wb:value").collect(&:text)
#values = Array.new
m.each do |m|
#values << m.to_f
end
end
Now create file views/chart/index.html.erb and paste following:
<!DOCTYPE html>
<html>
<head>
<title>Maxo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "http://code.highcharts.com/highcharts.js" %>
<%= javascript_include_tag"http://code.highcharts.com/modules/exporting.js" %>
<%= csrf_meta_tags %>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Brazil Poverty Headcount'
},
subtitle: {
text: 'Source: WorldBank.com'
},
xAxis: {
categories: [
'2009',
'2008',
'2007',
'2006',
'2005',
'2004',
'2003',
'2002',
'2001',
]
},
yAxis: {
min: 0,
title: {
text: 'X-Axis Data'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Brazil',
data: <%= #values.inspect %>
}]
});
});
</script>
</head>
<body>
<div style= "margin:50px">
<div id="container" style="min-width: 310px; height: 600px; margin: 15 auto"></div>
</div>
<%= yield %>
</div>
</body>
</html>
Also make sure that you have proper routing rule added to: config/routes.rb. For just simplicity you could just add:
root :to => 'chart#index'
In that case when you localhost:3000, you will get the chart/index view automatically. I have tested it and it works fine.
Just for any case views/layouts/application.html.erb should look:
<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>