7

Yes, there are similar questions, but they are about jquery adding lowercase attributes like here: Does the attr() in jQuery force lowercase?

But I have a different situation. Here is my HTML5 piece of code:

<tr class='projectRow' data-projectId='34'>

Notice that this is camelCase. And now this code does not work:

//"this" points to a child element
$id = $(this).closest('.projectRow').data('projectId');//undefined

But if I make it lowercase:

$(this).closest('.projectRow').data('projectid');

It works.

When I look at the source code, it's clearly "projectId" (camelCase), but when in chrome -> dev tools -> elements then it's "projectid" (lowercase) o_O

No wonder jquery can't get this value, but why is Chrome doing this? I did something similar hundreds of times before, although was using a - like in "project-id" and now after so many years of making web applications I discover something like this o_O

Community
  • 1
  • 1
konrad_firm
  • 769
  • 1
  • 8
  • 24
  • 1
    `data` attributes (along with all attributes names in term of best practices) should be lower case, otherwise it interferes with the way jQuery stores them in it's cache. – Rory McCrossan Mar 23 '16 at 11:10
  • OK, but why Chrome is doing this? – konrad_firm Mar 23 '16 at 11:15
  • 2
    @RoryMcCrossan if you're interested, it's not only problem with jquery, actually I'm breaking spec: https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes – konrad_firm Mar 23 '16 at 12:08
  • 1
    thanks, I knew jQuery didn't like mixed-case data attributes but didn't realise they were in the spec as being lower case. – Rory McCrossan Mar 23 '16 at 12:10

2 Answers2

3

EDIT

The HTML spec states attribute names are case-insensitive, meaning writing them all as uppercase is as good as writing them all in lowercase or in camelCase:

Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.

EDIT #2

Another part of the spec states it more explicitly:

All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

Original Answer

jQuery specifies that if you want to access attributes via camelCase, then hyphenate them such that:

data-project-id="1" is accessed via $(element).data('projectId');

Adam
  • 41,349
  • 10
  • 58
  • 78
  • OK, I'll be simply using lowercase, but why is Chrome doing this? Is this in a HTML5 specification, that attributes must be lowercase? I can't find it. – konrad_firm Mar 23 '16 at 11:14
  • so... it means Chrome should **not** make them lowercase... right? – konrad_firm Mar 23 '16 at 11:20
  • OK, nevermind, my understanding was that since HTML doesn't care about case Chrome should not "repair" it in any way, while it's the opposite. – konrad_firm Mar 23 '16 at 12:06
  • 1
    Adam: actually I'm breaking spec: https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes – konrad_firm Mar 23 '16 at 12:07
  • SO has broken my link, if anybody's interested then it's point #3.2.5.9 BTW - it's a bug in SO imho, asterixes **are** allowed in URL and SO cuts a URL on this character. Is there a place one can file a bug related to SO? – konrad_firm Mar 23 '16 at 14:49
  • Using `data-project-id` as attribute name and accessing it as `data('projectId')` might be seen as a violation of the principle of least astonishment (if the reader is looking for `project-id` in the JS code) – Stefan Rother-Stübs May 08 '19 at 08:32
0

Instead of using ".data()" you could just use ".attr()" to access the value of the attribute, then you could reference it by the name you've given it; like the following:

$(element).attr('data-projectId');
Chris Pietschmann
  • 28,196
  • 35
  • 116
  • 161