23

I am trying to conform my JavaScript coding style to my Zend coding style as much as possible, which is using camelCase. So, in my HTML5 data attributes, I am naming them as in this example:

<button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button>
<div id="users" data-reloadRequest="/user/index"> ... </div>

Pretty unobtrusive way to harness Jquery for actions, but when I call $('.action').data(), the attribute names are converted to lowercase.

Any workarounds for this?

I never though JavaScript variables should have dashes in them, and I can't understand why jQuery is internally doing this for me? Or maybe it is HTML5?

kristianp
  • 5,496
  • 37
  • 56
axiom82
  • 636
  • 1
  • 7
  • 15
  • 4
    Dont camelcase your html markup. Uses dashes in the markup (eg `data-action-method` instead of `data-actionMethod`) and it will be converted correctly – megawac Jan 08 '14 at 01:10
  • MDN reference for not adding capitals into custom data-attribute names - ["the name must not contain capital A to Z letters."](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) – StuartLC Nov 02 '18 at 11:42

2 Answers2

47

If you use 

data-action-method="delete"

then you can access the attribute with

$('.action').data('actionMethod')

This is part of the HTML5 DOM API:

The custom data attributes is transformed to a key for the DOMStringMap entry with the following rules:

  • any dash (U+002D) is removed;
  • any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • That's awesome! Thanks and so simple. Sure makes me feel like a newbie not knowing something so trivial. – axiom82 Jan 08 '14 at 01:33
  • @Michael: No worries, I wouldn't actually expect someone to just know this. It certainly confused me the first time when I tried to access the attribute as `.data('foo-bar')` ;) – Felix Kling Jan 08 '14 at 02:10
  • 22
    This is so confusing! Changing the case is unexpected behavior (to me). – Jowen Sep 11 '14 at 14:53
  • @Jowen: not confusing for me. It makes sense, but did have to look it up. – Aaron Dec 09 '14 at 15:32
  • 8
    Thanks for the answer, I was just banging my head against the wall with this one. However I cannot help but wonder why anyone would include something so absurd in the spec. It is as if they are trolling us. – Stilgar Dec 31 '14 at 14:42
  • Thanks, this makes sense actually, id 2 camel case - https://github.com/plentz/jquery-maskmoney/issues/109 – Goke Obasa Jun 24 '16 at 21:55
6

First off, see this part of the source code of JQuery, it assumes you have lower case attributes.

Secondly, by convention, all HTML5 attributes should be lowercase, see: http://www.htmlbasictutor.ca/html-tag-attributes.htm

Finally, be warned you may encounter futher problems if you insist on using upper cases, see Django: Unable to add UPPERCASE attribute name in HTML input element

Community
  • 1
  • 1
Daniel D
  • 119
  • 5