this works nicely
= link_to 'All', test_path(:param1 => xxx), 'data-no-turbolink' => true
and translates to
<a data-no-turbolink="true" href="/test?param1=xxx">All</a>
I want to change it to the new hash syntax so I did this:
= link_to 'All', test_path(param1: xxx), data: { no: { turbolink: true }}
but it translates to
<a data-no="{"turbolink":true}" href="/test?param1=xxx">All</a>
EDIT: This Works:
%a{href: "#{test_path(param1: xxx}", data: { no: { turbolink: true }}} All
which translates to
<a data-no-turbolink href='/test?param1=xxx'>All</a>
but shouldn't I stick to link_to rather than <a href></a>?
There are some naming conventions, so you must write like this:
link_to 'All', test_path(param1: xxx), data: {no_turbolink: true}
You should always try to use the rails helper methods when they're available. This way you'll get all the benefits of rails: cache-busting and relative pathing and whatever else comes in the future. Given that, the issue in your code is that the data hash can only be one level deep. So do this instead:
= link_to 'All', test_path(param1: xxx), data: { 'no-turbolink' => true }
Note: You can't really use a symbol for the no-turbolink part because symbols don't interpret hyphens. https://gist.github.com/misfo/1072693
Related
I have a Rails application that has a simple notification system. Many people are part of this project and sadly we didn't stick to a standard coding convention. There are some weird problems happening in certain situations and I found out that these occur because they were linked to using %a instead of link_to.
I then embarked on a journey of changing each %a to link_to and have already converted the simple stuff and then this boggled me:
.dropdown{"data-behavior" => "notifications"}
%a.dropdown-toggle.nav-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-behavior" => "notifications-link", "data-toggle" => "dropdown", :type => "button"}
%i.fa.fa-bell
%span{"data-behavior" => "unread-count"}
.dropdown-menu.dropdown-menu-right{"aria-labelledby" => "dropdownMenuButton", "data-behavior" => "notification-items"}
How do I convert this to a link_to?
When there's no href - you can pass nil there:
= link_to nil, class: 'dropdown-toggle nav-link',
type: :button,
aria:{ expanded: false, haspopup: true},
data: { behavior: "notifications-link", toggle: :dropdown} do
%i.fa.fa-bell
- # and so on
but for places where it's actually not a link - there' no much sense in making it a link_to
= link_to nil, type: :button,
class: 'dropdown-toggle nav-link',
aria: { expanded: false, haspopup: true },
data: { behavior: 'notifications-link', toggle: 'dropdown' } do
%i.fa.fa-bell
%span{"data-behavior" => "unread-count"}
Should be ok with this code
I have an img tag as html and I want to use it in erb:
<img src="images/Slider/app.png" alt="" width="636" height="441" data-ww="['600px','500px','400px','200px']" data-hh="['338px','281px','225px','113px']" data-no-retina>
my html erb code is:
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], no-retina } %>
but I get syntax error: unexpected '}', expecting =>
Rails does not allow dash-case as a hash key. Thus the syntax is failing when trying to parse no-retina.
You should use lateral strings if you want to have a dash-case as a key
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], 'no-retina': true } %>
In this particular case (image_tag helper and data attributes), however, Rails is smart enough to get you the right HTML if you just use uderscores:
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], no_retina: true } %>
Also if you looks at the image_tag documentation, you will see that you can use size to specify height and width. With some code style cleanup this is what looks much better:
<%= image_tag "/Slider/app.png", size: "636x441", data: { ww: ['600px','500px','400px','200px'], hh: ['338px','281px','225px','113px'], no_retina: true } %>
You can break it by - and nest it
<%= image_tag "/Slider/app.png", data: { no: { retina: true } } %>
i'm creating a like model, so here's a code:
- if policy(bonus).liked_by?
= link_to(image_tag("heart--filled--green.png", class: "Dislike"),
bonus_like_path(bonus, bonus.user_like(current_user)), method: :delete,
data: { remote: true, behavior: "fragments" })
- else
= link_to(image_tag("heart.svg", class: "Like"),
bonus_likes_path(bonus), method: :post,
data: { remote: true, behavior: "fragments" })
- if bonus.likes_count.zero?
span Like
-else
span.has-tip data-tooltip="" title="#{ bonus.liked_by }" Like
span class="like_count" #{ bonus.likes_count }
And it generates something like this:
The problem is that if I want to like something, I would like to press on the heart(like the given image), but I need to give the opportunity to press everywhere including the span Like and like's count. How can I solve my problem?
To make the image along with the spans part of the link, wrap them inside link_to using a block.
= link_to bonus_likes_path(bonus), method: :post, data: { remote: true, behavior: "fragments" } do
= image_tag("heart.svg", class: "Like"
- if bonus.likes_count.zero?
span Like
- else
span.has-tip data-tooltip="" title="#{ bonus.liked_by }" Like
span class="like_count" #{ bonus.likes_count }
You can have a bigger block in link_to using:
<%= link_to desired_path do %>
<div class="class-name">
</div>
<% end %>
Can I provide AJAX with a Rails URL/path?
For example, what I need is url: articles/1/comments/1.
Since I'm experiencing difficulties for some time now making AJAX execute this URL, I wonder if there's a way to use the Rails route I'm familiar with [comment.article, comment].
Note:
I'm loading a DIV using AJAX:
#welcome/index.haml
- #articles.each do |article|
= article.title
- article.comments.each do |comment|
%comment-content{ :id => "comment-#{ comment.id } %>", :class => "comment-content", "data-comment-id" => comment.id }
AJAX:
var loadComment = function() {
return $('.comment-content').each(function() {
var comment_id = $(this).data('comment-id');
return $.ajax({
url: "" ,
type: 'GET',
dataType: 'script',
});
});
};
Rails provide data-remote attribute in form. It works like AJAX and it uses url as you added in form
you can use it like below:
<%= form_for([comment.article, comment], remote: true) do |f| %>
...
<% end %>
you can use like
<%= form_for([comment.article, comment], remote: true) do |f| %>
...
<% end %>
if you are using form_for or if you want to send ajax like:
$.ajax({
})
then you can use
$.ajax({
url : "<%= url_for article_comment_path(article, comment)%>"
})
How do I add RDFa Lite 1.1 property="url" to my Rails link_to?
<%= link_to "Lipsum", my_path, property: "url" %>, naturally, won't work.
Desired outcome:
Lipsum
Source: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html
<%= link_to "Lipsum", my_path, { property: "url" } %>
In console:
irb(main):011:0> ActionController::Base.helpers.link_to('test', advisors_path, { property: 'url' })
=> "<a property=\"url\" href=\"/advisors\">test</a>"