rails and html data attributes: use dash(-) or underscore(_)?

Question

Lately, I'm facing problems with HTML custom data attributes in my rails application. I user the following pattern in order to add some data attributes to the html tags and use them later in my javascript(jQuery) code:

= %a.name{ href: "url.com", data: {first_name: "ben", last_name: "amsalem} }

In the javascript code I access those attributes:

alert($(".name").data("first_name") + " " + $(".name").data("last_name"));

In my development environment it goes well and I get the expected result (the same is true for my production environment in the past), but in my current production version I get "undefined" values. I checked the HTML source of the page and I saw that I now have something like:

<a class="name" href="url.com" data-first-name="ben" data-last-name="amsalem" />

Instead of:

<a class="name" href="url.com" data-first_name="ben" data-last_name="amsalem" />

Why does it happen? What causes the change?

Solution 1

After tests I did: seems like in development I had gems in version 3.2.9, and in production it was 3.2.12 - the wrong behavior (convert to <a date-last_name/>) was fixed between those versions, and after upgrading my development version I can see the change.

Solution 2

It's perfectly normal, data: { first_name: "ben" } is supposed to produce data-first-name="ben".

The best way you would access this attribute is with .data("firstName"), but .data("first-name") would also work.

Solution 3

I take it that you are using HAML. Hypernation comes as default since 4.0. Set hyphenate_data_attrs to false to turn this off.

Documentation: http://haml.info/docs/yardoc/Haml/Options.html#hyphenate_data_attrs-instance_method

Original github pull discussion: https://github.com/haml/haml/pull/488

Comments

[benams]

I agree, it's correct and normal. But in previous versions it was data-first_name, so my JavaScript code is data("first_name"). What made this change?

[Robin]

As far as I know, rails never generated data-first_name when using this syntax { data: { first_name: "" } }, but I might be wrong. Maybe you were using the string version, like data: { "first_name" => "ben" }. If not then I have no idea.

[benams]

nope, I checked again and I use the symbol version and not the string version. it's a kind of weird, because I'm 100% sure it used to work in my old version and still works in the development environment.

[Robin]

But there should not be underscores in the first place, since rails generates data-first-name, right?

[Robin]

Are you sure that it was generating data-last_name? Or do you just know that .data("first_name") was working in your JS? Because it's possible that older jquery version where able to interpret "first_name" as "first-name". But anyways, you should just fix your code and move on ;)

[benams]

100% sure, it was generating data-last_name. I'll update, thanks.

[darshanags]

@Robin underscores were not automatically replaced with hyphens pre v.4.0: github.com/haml/haml/issues/478

[Robin]

My bad, I'm so used to the rails syntax, that I did not notice that he wasn't actually using a rails helper, but haml. So yeah, you're right, and I think this should be the accepted answer.

[Peter Black]

I am also 100% sure. What is causing this? We just made the update to rails 4 and nothing with user_id works. This is horrible. It will take weeks to work this out of our app.