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!
Related
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}"
I am using a video slider in my website and the plugin requires the format to be the following:
<li class="slide" data-mightyslider="
cover:'path_to_cover',
title: 'title_name'">
</li>
I want to replace "path_to_cover" with <%= image_tag "image_name" %> but I cannot seem to get it to work with content_tag. How might I accomplish this?
The image_tag helper isn't what you want in this instance.
Try this:
<%= content_tag :li, class: "slide", data: { mightyslider: raw("cover: '#{image_path('something.jpg')}', title: 'title_name'") } do %>
list item content
<% end %>
I have the following code,my problem is when i tried to add or any other html tag inside it as shown its not working and it displayed as normal string.
<%= link_to image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" ),'javascript:;' ,class:'popovers','data-content'=>"Number of Students: #{student_class.students.count}<br><button>Click to enter</button>" ,'data-original-title'=>"#{student_class.name.capitalize}" %>
also i have tried to add html_safe to be like this
<%= link_to image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" ),'javascript:;' ,class:'popovers','data-content'=>"Number of Students: #{student_class.students.count}<br><button>Click to enter</button>".html_safe ,'data-original-title'=>"#{student_class.name.capitalize}" %>
but this also wasn't working and giving the same result
Try adding 'data-html'=>true. You'd want something like:
<%= link_to image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" ),'javascript:;' ,class:'popovers', 'data-html'=>true, 'data-content'=>"Number of Students: #{student_class.students.count}<br><button>Click to enter</button>" ,'data-original-title'=>"#{student_class.name.capitalize}" %>
And if any of the values you are putting into your HTML need to be escaped to prevent injection, you can use "h". Something like: #{h(student_class.name.capitalize)}.
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" %>
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 %>