Using data attributes with jQuery

Question

I have this button:

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   <img src="templateImages/Icon_200.png" />                
</button>

And this jQuery:

$(".themeChanger").click(function () { 
    alert($(this).attr("data-themeValue")); 
    alert($(this).data("themeValue")); 
});

For some reason the first alert shows "grid" like it should, but the second shows undefined. Is there something stupid I'm missing?

Vinodh · Accepted Answer · 2014-06-19 06:02:10Z

33

I think data will look on lowercases: alert($(this).data("themevalue")) //grid

or if you want to use themeValue you need to use:

edit:

I was wrong, it doesnt have anything to do with lowercases, you can use themeValue if you are having the attribute: data-theme-value then you call itwith $(element).data("themeValue")

<button class="themeChanger" data-themeValue="Theme1" data-theme-value="Theme2"></button>

$(".themeChanger").click(function() {
    var el = $(this);

    alert($(this).data("themeValue")); //Theme2
    alert($(this).data("themevalue")); //Theme1
});

edited Jun 19, 2014 at 6:02

Vinodh

5,2684 gold badges42 silver badges69 bronze badges

answered Sep 29, 2011 at 19:46

voigtan

9,0212 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hari Pachuveetil Over a year ago

It is hyphenation & camel-casing more than lower case that was the issue with the OP's question

JAAulde · Accepted Answer · 2011-09-29 20:13:02Z

25

As noted in this Learning jQuery article, HTML5 data-* attributes are handled by the browser->JS conversion in the same way that CSS names are handled--that is:

the leading data- is removed (a step not needed in the CSS name comparison I drew above)
- data-specialInfo becomes specialInfo
- data-more-specialInfo becomes more-specialInfo
the remaining attr name is split on -
- specialInfo becomes [ specialInfo ]
- more-specialInfo becomes [ more, specialInfo ]
the first of the resulting split parts is dropped to all lower case
- [ specialInfo ] becomes [ specialinfo ]
- [ more, specialInfo ] becomes [ more, specialInfo ] (no change as first part was already lower)
the rest of the resulting split parts are dropped to lower case, but their first letter is made upper case
- [ specialinfo ] becomes [ specialinfo ] (no change because there were no other parts)
- [ more, specialInfo ] becomes [ more, Specialinfo ]
The now case-modified parts are rejoined on empty string
- [ specialinfo ] becomes specialinfo
- [ more, Specialinfo ] becomes moreSpecialinfo

This being the case, your data-themeValue attribute is accessible via $(this).data("themevalue"). Whereas a data-theme-value attribute would be accessible via $(this).data("themeValue").

It's terribly confusing unless you recognize the mechanism in use.

edited Sep 29, 2011 at 20:13

answered Sep 29, 2011 at 19:48

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

4 Comments

JAAulde Over a year ago

I don't really understand what you mean. Who is "they"? Anyway, the above process is necessary (and not actually all that complicated) due to sytanx differences between HTML and JavaScript.

jbkkd Over a year ago

Thanks for this answer. I find it quite annoying - why does jQuery enforce me to use a specific notation?

JAAulde Over a year ago

No problem, glad it helped. The data attr API exists in a certain form without jQuery in many modern browsers. jQuery is providing it where it does not already exist, and augmenting it where it does. This being the case, they must make it compatible. Its not really all that bad anyway--just gotta get used to it. It's no different than setting CSS values from JS.

bcmoney Over a year ago

BRAVO @JAAulde excellent examples... can't think of a better way to summarize the perils/gotchas of "data-*" attributes! I suppose that's a good reason to stick to kebab case and never use camelCase "data-" attributes.

BNL · Accepted Answer · 2011-09-29 20:02:03Z

5

The problem is the camel case. For clarity I'd stick to the data-theme-value format for your attributes.

http://jsfiddle.net/NkHEx/2/

jquery automatically converts .data('some-value') to data('someValue')

Note that both alert calls return grid

edited Sep 29, 2011 at 20:02

answered Sep 29, 2011 at 19:48

BNL

7,1214 gold badges30 silver badges32 bronze badges

Comments

Hari Pachuveetil · Accepted Answer · 2011-09-29 19:47:43Z

4

I think it is the camel casing of hyphenated words in the data tag implementation that is the gotcha here

Try this jsfiddle - http://jsfiddle.net/FloydPink/fb6Y6/

<button type="button" class="themeChanger" data-theme-value="grid" value="Grid">
   data-theme-value                
</button>

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   data-themeValue
</button>

$(".themeChanger").click(function () {
    alert($(this).attr("data-themeValue"));
    alert($(this).data("themeValue"));
});

answered Sep 29, 2011 at 19:47

Hari Pachuveetil

10.4k3 gold badges47 silver badges69 bronze badges

Collectives™ on Stack Overflow

Using data attributes with jQuery

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related