18

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?

benams
  • 4,308
  • 9
  • 32
  • 74
  • Looks like what it is now is more correct, and to access it, you need `.data("lastName")` Did you update rails? That could possibly explain the change. – Kevin B Mar 05 '13 at 16:29
  • http://stackoverflow.com/questions/8734722/rails-link-to-helper-with-data-attribute – MrYoshiji Mar 05 '13 at 16:30
  • It is best not to use underscores in attribute names. I know for sure in MVC that the Html Helpers will convert underscores to dashes. easiler to just use `data-firstname` for example – musefan Mar 05 '13 at 16:30
  • He's right to use underscores here, because you can't use dashes in symbols, and this syntax is really ugly `:"first-name"`. – Robin Mar 05 '13 at 16:51
  • How would you then access this data-attribute in a model/controller? – Ryan Drake Jul 08 '15 at 02:41

3 Answers3

16

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.

Robin
  • 21,667
  • 10
  • 62
  • 85
  • 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? – benams Mar 05 '13 at 16:44
  • 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. – Robin Mar 05 '13 at 16:49
  • 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. – benams Mar 05 '13 at 16:54
  • 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 ;) – Robin Mar 05 '13 at 16:58
  • 100% sure, it was generating `data-last_name`. I'll update, thanks. – benams Mar 05 '13 at 17:10
  • 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. – Peter Black Dec 11 '15 at 17:17
4

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

darshanags
  • 2,519
  • 1
  • 13
  • 19
  • But there should not be underscores in the first place, since rails generates `data-first-name`, right? – Robin Mar 05 '13 at 16:56
  • @Robin underscores were not automatically replaced with hyphens pre v.4.0: https://github.com/haml/haml/issues/478 – darshanags Mar 05 '13 at 17:12
  • 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. – Robin Mar 05 '13 at 17:16
0

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.

benams
  • 4,308
  • 9
  • 32
  • 74