I am new to ruby on rails platform. I am designing a form with text fields. In the beginning, I created a simple html file with css to align the text fields. Below is my css
#input{
padding-left:50px;
padding-bottom:30px;
}
I created text fields using following code:
<div id = "input"><input type = "text" size = "25" name = "fname" value = "first name"></input></div>
<div id = "input"><input type = "text" size = "25" name = "lname" value = "last name"></input></div>
When I ran the web page, I saw the text field aligned properly the way I wanted inside form. However I tried to convert the code in RoR, I am not able to see padding. Below is my code in RoR
<div class="input"><%= f.text_field :fname, :size => 25, :placeholder => 'first name' %></div>
<div class="input"><%= f.text_field :lname, :size => 25, :placeholder => 'last name' %></div>
Can anyone tell me what might be the issue with my approach?
In the css code #input{..} the hash # means that it is looking for an id. After you have changed the code, you set it to class="input". Therefore the css can't find it by id. Change the css to .input{..}.
Related
I'm having a very weird problem. Here's my view:
<h1>All Deals</h1>
<%= sanitize print_grouped_deals(#deals) %>
Here's my deals_helper.rb
def print_grouped_deals(grouped_deals_by_date)
grouped_deals_by_date.map do |(date, deals)|
%(<div id='#{date.to_s}-deals'>
<h3>#{brief_time date}</h3>
#{deal_paragraphs_for_group(deals)}</div>)
end.join
end
def deal_paragraphs_for_group(deals)
deals.map do |deal|
%(<p>#{"<span class='warning'>POSSIBLY EXPIRED! -</span>" if deal.probably_expired?} #{link_to deal.headline, deal}</p>)
end.join
end
Of note is the 3rd line in the first method in the second snippet. I cannot get it to add an id to my div tag! If I change <div id='#{date.to_s}-deals'> to <div class='#{date.to_s}-deals'> it adds the class no problem but if I keep it as id= then it just creates a simple <div> tag with no attributes.
Lest we imagine it's something to do with generating multiple divs with ids (although the ids will be different), I've also tried generating a simple <div id="thing" /> from the helper, and I get the same empty div tags as a result.
WTF?
You have to pass a whitelist of attributes to the sanitize helper https://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize
To allow id attribute
<%= sanitize print_grouped_deals, attributes: %w(id) %>
To set the default allowed tags or attributes across your application
# In config/application.rb
config.action_view.sanitized_allowed_tags = ['div', 'h3']
config.action_view.sanitized_allowed_attributes = ['id', 'class']
I have a check_box_tag that looks like this :
check_box_tag('shipping_method[shipping_categories][]', category.id,
#shipping_method.shipping_categories.include?(category))
When inspecting the output in browser, I have the following :
<input id="shipping_method_shipping_categories_"
name="shipping_method[shipping_categories][]" type="checkbox" value="1" />
I don't get why the id has no "id", meaning that the underscore at the end of
id="shipping_method_shipping_categories_"
makes me expect an id for this particular shipping_category.
Any of you guys and gals have thoughts on this ?
Thanks !
I don't get why the id has no "id", meaning that the underscore at the
end of id="shipping_method_shipping_categories_" makes me expect an id
for this particular shipping_category.
That is the default behavior of the check_box_tag. In other words it is constructed that way. When you look upon the code of how it is constructed, you will see the below
# File actionview/lib/action_view/helpers/form_tag_helper.rb, line 374
def check_box_tag(name, value = "1", checked = false, options = {})
html_options = { "type" => "checkbox", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
html_options["checked"] = "checked" if checked
tag :input, html_options
end
So, the "id" is constructed with the method sanitize_to_id(name). So I've further looked upon sanitize_to_id(name) to see its code and I've found this
def sanitize_to_id(name)
name.to_s.delete("]").tr("^-a-zA-Z0-9:.", "_")
end
So, shipping_method[shipping_categories][].to_s.delete("]").tr("^-a-zA-Z0-9:.", "_") returns shipping_method_shipping_categories_. That explains its behavior.
If you want to achieve what you are expecting, I recommend you to go with collection_check_boxes
For example,
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial)
returns
<input id="post_author_ids_1" name="post[author_ids][]" type="checkbox" value="1" checked="checked" />
I'm making a website using ror and I have a list of fandoms, and I want to display different pictures and writing for that fandom. Right now, just for testing, I'm having it just display the name of the fandom at the top of the page, but no matter which one I click on, it only displays the name of the first fandom. Here's the parts of the files I think are relevant, but if you need to see more, I'll post it.
Section of routes.rb:
get 'fandoms' => 'fandoms#index'
get 'fandoms/new' => 'fandoms#new'
post 'fandoms' => 'fandoms#create'
get 'fandoms/:id' => 'fandoms#show', as: :fandom
resources :fandoms
The show method in fandoms_controller:
def show
#fandom = Fandom.find_by(params[:id])
end
The index.html.erb for fandoms:
<div class="main">
<div class="container">
<h2>Fandoms</h2>
<%= link_to "New Fandom (dev only)", "fandoms/new" %>
<% #fandoms.each do |fandom| %>
<div class="fandoms">
<%= link_to fandom.name, fandom_path(fandom) %>
</div>
<% end %>
</div>
And finally the show.html.erb for fandoms:
<div class="main">
<div class="container">
<h2>Fandoms</h2>
<div class="fandom">
<h1><%= #fandom.name %></h1>
</div>
</div>
</div>
I double checked my code with the Ror tutorial on codecademy, but I still couldn't find any differences for what I wanted to do.
Thanks.
Your show action has a subtle typo that's breaking your logic:
#fandom = Fandom.find_by(params[:id])
Should actually be:
#fandom = Fandom.find(params[:id])
The difference is, find_by will return the first row for which the conditions passed are met. You're not actually passing any conditions; just an ID, which in Postgres doesn't even work:
irb> Fandom.find_by(1)
PG::DatatypeMismatch: ERROR: argument of WHERE must be type boolean, not type integer
LINE 1: SELECT "fandoms".* FROM "fandoms" WHERE (1) LIMIT 1
Your database is more permissive, but seems to be treating it just as a WHERE TRUE clause and thus every single row meets the condition. As such, it returns the first row every time. Using find(id) will give you the desired result.
I am trying to display the search query in the search bar in HTML.
But if the variable includes a space, the webpage is only going to display the first word.
Here is the code
app.get('/search', function(req, res) {
console.log(req.originalUrl,'oro')
console.log(req.query['search_query'],'aaaaaaa')
res.render('search.ejs', {
user : req.user,
query : req.query['search_query']
});
});
Here is the html code
<form action="/search" method="get">
<div class="form-group">
<input type="submit" class="btn btn-warning btn-lg" value = "search" style = "float: right"/>
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" value = <%= query %> class="form-control" name="search_query" style = "width:100%;"/>
</div>
</div>
</form>
query is the variable collected from the last webpage and passed to /search.
If I type in "I want to find xx", the webpage will only display "I" in the search box. However, in the console, the printout result is the full query " I want to find xx". The corresponding url is also correct "/search?search_query=I+want+to+find+xx".
Anyone has an idea? Thanks a lot!
Let's start with correcting your HTML, by using quotes in value:
<input type="text" value = "<%= query %>" class="form-control" name="search_query" style = "width:100%;"/>
Here under IE you should see a large error, on FF and Chrome browser will try to save the situation and catch only the first word.
Prolably rest of your words are used as attributes and ignored in this input.
Change <%= query %> to <%- query %> .
To add a new line or space while working with ejs, you will have to replace string parameters with HTML tags.
For example, here, I am replacing \n => < br/> to add a new line
<% var testVar = 'Line1\nLine2' %> <%- testVar.replace(/\n/g, '<br/>') %>
Change <%= query %> to <%- query.replace(/ /g, " ") %>
I struggled for hours to render text with spaces
Adding quotes seems to be the easiest solution to this
value = "<%= query %>"
to solve partial content change:
<%= to <%-
use: `` with "" inside
JS example:
let txt = "some text"
console.log(`"${txt}"`)
I'm trying to generate a link using the link_to helper that will output the following HTML:
<i class="some_class"></i>Link Name
However the code I'm using to try to accomplish this:
link_to(tag("i", class: options[:icon]) + title, url)
...is outputting:
<i class="some_class">Link Name</i>
Why is it doing this, and how can I fix it? Thanks.
EDIT:
I believe I found the issue.
<i> tags are not self-closable tags in HTML5. Therefore the text after the i is treated as that element's content.
Have you tried using the block format of link_to?
<%= link_to url do %>
<%= tag("i", class: options[:icon]) %>
Link Name
<% end %>
Tweak that to your needs and maybe you'll get what you're looking for.
This is the icon tag helper I use in my applications which I frequently pass as the first argument to link_to, which can either be used to create a icon tag alone, or an icon tag followed by text.
def icon_tag(icon, *args)
options = args.extract_options!
text = args.first || options.delete(:text)
if text.nil?
content_tag :i, "", class: ["icon", "icon-#{icon}"] + options[:class].to_a
else
"#{icon_tag icon} #{text}".html_safe
end
end