Stack Overflow
Stack Overflow

Questions tagged [custom-data-attribute]

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

The HTML5 spec contains a "Embedding custom non-visible data with the data-* attributes" chapter that states the folowing:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

[...]

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

1101 questions
37
votes
3 answers

How to do data- attributes with Haml and Rails?

I can have %a{href: '#', data_toggle_description_length: 'toggle_me_ajax'} which it gives me underscores not dashes, i.e. However I want to have HTML data- attributes, i.e.
Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
34
votes
6 answers

Pass javascript function as data-* attribute and execute

We know such syntaxes as below, when defining a value for onClick attribute:
32
votes
2 answers

Escaping/encoding single quotes in JSON encoded HTML5 data attributes

In PHP, I use json_encode() to echo arrays in HTML5 data attributes. As JSON requires - and json_encode() generates - values encapsulated by double quotes. I therefor wrap my data attributes with single quotes, like:
Jérémy F.
  • 583
  • 1
  • 4
  • 8
32
votes
2 answers

Can I use HTML5 data-* attributes as boolean attributes?

I want to use a custom boolean attribute to mark an element's contents as editable. I'm aware of the data-* attributes, but wasn't sure if they require a value. I don't need data-is_editable="false", as the lack of the attribute would be equivalent.…
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
31
votes
6 answers

removeData() jquery method not working

I think I'm using removeData correctly but it doesn't seem to be working, here's what I'm seeing in the dev console, could anyone explain what I'm doing wrong? I'm outputting the current data attribute value, calling removeData, then outputting the…
turbo2oh
  • 2,849
  • 6
  • 34
  • 46
30
votes
2 answers

Custom sorting on values in a data-sort attribute with Jquery Datatables

I have to do some custom sorts with Jquery Datatables. I do not want to write custom sort functions for every custom sort. I want to define a value to sort on and have Datatables ignore the original column values, if value is defined. For…
Pake Beet
  • 571
  • 1
  • 4
  • 10
27
votes
6 answers

Hidden inputs vs HTML5 data attributes

Something that's been bugging me recently is the use of HTML5 data attributes and when is the appropriate to use them. Typically, on a page that performs a number of AJAX calls to my server, I require the ID that is representative of the page being…
Alastair Pitts
  • 19,423
  • 9
  • 68
  • 97
25
votes
4 answers

How to preserve the case of a data attribute?

The html object:
The code: var $o = $("div"); $.each($o.data(),function(k,v){ console.log(k); //writes 'myattribute' instead of 'myAttribute' }); How do I preserve the case of the attribute?
Control Freak
  • 12,965
  • 30
  • 94
  • 145
25
votes
4 answers

How to get, set and select elements with data attributes?

I'm having some trouble with data-attributes, I can't get anything to work for some reason so I must be doing something wrong: Set: $('#element').data('data1', '1'); //Actually in my case the data is been added manually Does that make a…
Thaiscorpion
  • 479
  • 1
  • 8
  • 18
24
votes
2 answers

Why should I prepend my custom attributes with "data-"?

So any custom data attribute that I use should start with "data-":
  • John says: Hello, how are you?
    • Will anything bad happen…
    Tom Lehman
    • 85,973
    • 71
    • 200
    • 272
    24
    votes
    3 answers

    jQuery's data() attribute does not update when element data changes

    I wanna use jQuery's data() api to retrieve all the data attribute of an element. But the cache nature of this api is really annoying. Sometimes I need to change some data atribute of an element in javascript but the data() api always return the…
    chaonextdoor
    • 5,019
    • 15
    • 44
    • 61
    22
    votes
    5 answers

    jQuery.data(key) throwing undefined is not a function

    I have some checkboxes which are used to show/hide columns and automatically resize them to fit the screen. I've linked the checkboxes to their relevent columns using a data attribute and try to read this value using jQuery.data(). This gives an…
    Andy Nichols
    • 2,952
    • 2
    • 20
    • 36
    22
    votes
    2 answers

    CSS selector for custom data-attribute?

    Why my star is not appearing in YELLOW ? How to fix it ? Here's the relevant code for the above issue. HTML
    ★ Italian Pizza: salmon, olives, onion,…
    Hugolpz
    • 17,296
    • 26
    • 100
    • 187
    22
    votes
    2 answers

    Data attribute value updated by jquery is not visible in DOM

    I am updating a data attribute by jQuery, Like: jQuery('div').data('hidden', 'true'); alert(jQuery('div').data('hidden')); Data attribute value got changed and returned new value which is true but DOM is still showing the old value which is false.
    user007
    • 3,203
    • 13
    • 46
    • 77
    1 2
    3
    …
    73 74