Best way to use html5 data attributes with rails content_tag helper?

Question

The issue, of course, is that ruby symbols don't like hyphens. So something like this obviously won't work:

content_tag(:div, "Some Text", :id => "foo", :data-data_attr => some_variable)

One option is to use a string rather than a symbol:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

Or I could just interpolate:

"<div id='foo' data-data_attr='#{some_variable}'>Some Text</div>".html_safe

I sorta prefer the later but both seem a little gross. Anyone know of a better way?

score 147 · Accepted Answer · answered Nov 09 '11 at 05:18

147

Rails 3.1 ships with built-in helpers:

http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

E.g.,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

answered Nov 09 '11 at 05:18

stephencelis

4,954
2
29
22

This actually just appends things onto my URL. It doesn't add a data attribute. – Jim Wharton Dec 06 '11 at 02:05
2

Of course it does.... But if you are using a helper which takes both a url hash AND a html options hash you have to explicitly wrap both hashes in curly brackets {}. link_to for example: link_to "label", {:action => blub}, {:data => {:foo => :bar}, :class => "test"} – reto May 25 '12 at 09:41
This works: 'data-bv-notempty-message'=>"The username is required" – Ivan Oct 17 '14 at 14:21

score 66 · Answer 2 · answered Nov 23 '10 at 16:51

66

Have you tried using quotes with symbol? Something like:

:"data-foo" => :bar

answered Nov 23 '10 at 16:51

Eimantas

48,927
17
132
168

Why the starting colon `:`? – Joshua Pinter May 30 '15 at 23:07
1

The colon makes the key a symbol. – Eimantas May 31 '15 at 12:08

score 11 · Answer 3 · answered Jan 05 '11 at 19:23

A helper's not a bad idea but seems a bit of an overkill for what's essentially me being fusy about syntax. I suppose there's nothing built into rails which is what I was hoping for. I'll just use this:

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

score 9 · Answer 4 · answered Dec 08 '17 at 09:34

Building on previous answers, here's the canonical way to do it now:

content_tag(:div, "Some Text", id: "foo", data: { attr: some_variable })
content_tag(:div, "Some Text", id: "foo", data: { "other-attr" => some_variable })

Which generates:

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>

score 8 · Answer 5 · answered Mar 17 '13 at 17:16

JQuery Air (codeschool.com) Level 1, Example 1

Codeschool/platform-independent version

<section id="tabs">
  <ul>
    <li><a href="#2012-09-27" data-flights="6">Sep 27</a></li>
    <li><a href="#2012-09-28" data-flights="5">Sep 28</a></li>
    <li><a href="#2012-09-29" data-flights="5">Sep 29</a></li>
  </ul>
</section>

Rails Version

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "Sep 27",:href=> "#2012-09-27", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "Sep 28",:href=> "#2012-09-28", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "Sep 29",:href=> "#2012-09-29", :data => { :flights => "5" } ) %></li>
  </ul>
</section>

score -4 · Answer 6 · answered Nov 28 '10 at 02:21

-4

You can always create you own helper function so then you can write

<%= div_data_tag the_id, some_text, some_data %>

answered Nov 28 '10 at 02:21

rodrigob

2,891
3
30
34

Best way to use html5 data attributes with rails content_tag helper?

6 Answers6

Linked

Related