How can I apply the following to a div in rails so that when you click on the div it functions just like this link? Thanks
<%= link_to "#2", :class => "xtrig", :rel => "coda-slider-1" %>
I may be misunderstanding you but...
If you want the div to be a clickable link, the logical solution is to write something that generates
<a href="#2">
<div>
Some stuff
</div>
</a>
However, this is bad as putting block elements inside inline elements is wrong.
link_to can accept a block, so you could use spans:
<%= link_to('#2') do %>
<span>Some stuff</span>
<% end %>
Alternatively a Javascript handler on the div onclick event.
<%= link_to "link name", :anchor => "#2", :class => "xtrig", :rel => "coda-slider-1" %>
If you only want to have a block element in a separate line you do not need a <div> but you can make the <a> tag "behave like a div":
a.xtrig {
display: block;
}
Rails provide link_to block to wrap the html code inside it and make them clickable.
<%= link_to(your_path) do %>
Entire html code written inside will be clickable.
<% end %>
Related
I need to nest an 'a' element inside of another 'a' element like so:
<a href="www.example.com" class="so-and-so">
<span>something</span>
<i class="an-icon">
</a>
However I need to use the rails 'link_to' helpers instead of plain html. But when I try to nest the link_to helper like this:
<%= link_to "www.example.com", class: "so-and-so" do %>
<%= content_tag :span, "something" %>
<%= link_to "www.another.example.com", class: "another-link" do %>
<%= content_tag :i, class: "an-icon" %>
<% end %>
<% end %>
It outputs html more like this:
<a ...>
<span ...>
</a>
<a class="another-link" ...>...</a>
Any help would be greatly apreciated. Thank you!
EDIT
It turns out that rails was outputting the correct html after all, but the browser is not interpreting it correctly. It it possible to have a link inside of a link?
SOLVED (ISH)
It turns out that nesting <a> elements is not valid HTML, so the browser was just trying to "correct" my code. I ended up just placing the a element outside the other one and using CSS to make it look the same.
Since you need the inner link tag point at a destroy action on a controller. You can trigger the action by the click event of the first link.
$('#first_link').on('click', function() {
$.ajax({
type: "DELETE",
url: YOUR_SECOND_LINK ,
data: {id: YOUR_ID },
success: function(data, textStatus, jqXHR){...},
error: function(jqXHR, textStatus, errorThrown){...}
})
});
This can be achieved by using the <template> element which will prevent the browser from closing an anchor tag before another one is opened.
<%= link_to "www.example.com", class: "so-and-so" do %>
<%= content_tag :span, "something" %>
<template>
<%= link_to "www.another.example.com", class: "another-link" do %>
<%= content_tag :i, class: "an-icon" %>
<% end %>
</template>
<% end %>
I worked this out because I was refactoring Vue components that had nested anchor tags into html.erb files. It is a requirement of each of the individual Vue components that it is wrapped in a <template> tag so I copied it over and voila!
This is a simple question but I can't seem to find a solid answer. I simply want to know if this is valid? it's a basic form_for with in input at the bottom.
## Form
<%= form_for #snitch, html: { class: "form-actions", method: 'delete' } do |form| %>
<span class="button-text"><%= link_to 'NO WAY!', home_base_url_or_default(root_path), rel: "modal:close" %></span>
<button type="submit" class="button button--modal delete-snitch" data-snitch-id="<% #snitch.token %>" value="Yes, delete it.">
<% end %>
Is the third line valid? specifically where it says data-snitch-id="<% #snitch.token %>"? if it is not. can someone help me figure out how I can do something like that?
HTML data attributes are perfectly valid and widely supported. They're used to store custom data in an element. You can create elements with those attributes in rails helpers as well.
<%= button_tag "Yes, delete it.", type: :submit,
data: {"snitch-id" => #snitch.token},
class: 'button button--modal delete-snitch' %>
The only problem with your example is that you're not printing the value of #snitch.token. You should be using <%= #snitch.token %> instead of <% #snitch.token %>
Use #{ } expression instead.
data-snitch-id="#{#snitch.token}"
Why I can not have this as an achor tag?
Why the below code is not working.
I have p which has a, a has span and a closes after span
Here's the code. What's wrong?
<p class="paraClass">
<a>
<span id="cartitems">
<%= pluralize(#size, 'item') %>
</span>
</a>
</p>
Please help
An A-Tag needs to have a href - else its just a anchor.
A Good way is to use a helper of rails called link_to
You can use it in two ways, just pass content-string and url, or pass url and a block. If you pass a block, the return of the block will be used as the display of the a-tag.
link_to "content", "url", {options}
link_to "url", {options} do
block
end
Unless you're just using some string as the display-text, i always recommend you to use the block-style. It is easier for you to edit something inside of that block and of course its easier to read and understand.
In your case it would be:
<p class="paraClass">
<%= link_to "#", onclick: "return false;" do %>
<span id"cartitems">
%= pluralize(#size, 'item') %>
</span>
<%- end %>
</p>
Maybe you want to switch to haml which helps you to write html with ease. In Haml the same code looks sweet within 2 lines of code:
=link_to "#" do
%span#cartitems=pluralize #size, "item"
UPDATE: [ as per comment ]
Its simple. Only add the href tag like below code:
<p class="paraClass">
<a>
<span id="cartitems">
<%= pluralize(#size, 'item') %>
</span>
</a>
</p>
<!-- here simply changing the color -->
<style>
a { cursor: pointer; }
a:hover{ color: #ff9900; }
</style>
<%= link_to content_tag(:span, pluralize(#size, 'item') ), '#' %>
use link to tag with content_for... so that it will show u how u want
I am trying to create articles for my blog. I got the controller working correctly, except for a spacing issue.
In my text-area field, when I type in paragraphs and hit return the paragraphs are morphed into one paragraph.
This is what the output looks like when I view the source code
<li><strong>jksdf</strong></li></br>
<li>This is the first sentence.
This is the second sentence.
This is the third sentence.</li>
When I view it in development, it looks like this
This is the first sentence. This is the second sentence. This is the third sentence.
Stack Overflow managed to get this to work in their app, so why can't I?
Here is my Index page
<ul class = 'articles-list'>
<% #article.each do |article| %>
<li><strong><%= article.title %></strong></li></br>
<li><%= article.body %></li>
<% if signed_in? && current_user.admin? %>
<li><%= link_to 'Edit', edit_article_path(#article)%></li>
<li><%= link_to 'Delete', article, method: :delete%></li>
<% end %>
<% end %>
</ul>
My New Articles page with the form
<h3>New Article</h3>
<div class = 'center'>
<%= form_for #article do |f| %>
<p>
<%= f.label :title, class: 'marker' %>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body, class: 'marker' %>
<%= f.text_area :body, :rows => "15" %>
</p>
<p>
<%= f.submit 'Submit', :class => 'btn btn-success' %>
</p>
<% end %>
</div>
My Migration File
class CreateArticles < ActiveRecord::Migration
def change
create_table :articles do |t|
t.string :title
t.text :body
t.timestamps
end
end
end
I don't see why it's rendering a space instead of a paragraph break.
Do I need to include linebreaks in my text box? I can't use gsub, that won't work either.
Edit: It might have to do with using the li html tag. Maybe that forces all text to one line.
Edit: No that doesn't work either. I tried replacing ul and li tags with div tags, and I still received the same error.
I've tried the following
Using Line Breaks in the text-area box
Replacing UL and LI tags with DIV tags
Try using simple_format on the displayed text:
<%= simple_format article.body %>
It should convert single line breaks into <br> tags and wrap paragraphs (bordered by double line breaks) in <p> tags. HTML essentially ignores line breaks which is why you need some markup inserted.
If you need additional formatting options you'll probably want to look at integrating markdown (or something similar) in your application using something like Redcarpet.
I think there is a relative easy answer to this, but how can I make this link_to...:
<%= link_to(image_tag(p.thumbnail, class: "hoi"), "Something in here?") %>
...link to the same as this:
<a class="fg" href="#<%= p.id %>" data-toggle="modal">
?
(Just to be clear: When I click on the image in the link_to, I want to get linked to href="#<%= p.id %>" with the data-toggle="modal" option).
If you're trying to link an image to an anchor on the page, do this:
<%= link_to(image_tag(p.thumbnail, class: "hoi"), "##{p.id}") %>
You can do normal ruby string interpolation inside erb block (<%= %>)
Try something like this:
<%= link_to "##{p.id}", "Something in here?", :class => "fg", :data-toggle => "modal" %>