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
20
votes
2 answers

jquery data attribute removes leading zeros

i have this html. Pending i am using the following jQuery to fetch the value. var number = $(this).find('img').data('number'); above jQuery code fetches values with non-leading zeros, for…
Ibrahim Azhar Armar
  • 25,288
  • 35
  • 131
  • 207
20
votes
1 answer

How do I check if a data-attribute changes?

var max = this.collection.max(function(player) { return player.get('points'); }); I spent a few hours playing with backbone.js trying to figure out how to check if my max model changes, it was nearly impossible, so I decided to set the models…
Michael Joseph Aubry
  • 12,282
  • 16
  • 70
  • 135
20
votes
3 answers

what is the purpose and usage of data-value, data-title, data-original-title, original-title, etc.?

I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute. Option 1
questy
  • 517
  • 2
  • 4
  • 14
19
votes
3 answers

Using jQuery to get data attribute values with .each()

I have the following HTML with data attributes - I want to write some jQuery that will loop through the HTML and collect the data attributes and put them into an array - could anyone assist as I'm getting an error. I am trying to use the data()…
Zabs
  • 13,852
  • 45
  • 173
  • 297
19
votes
2 answers

Set custom data- attributes on {{#linkTo}} helper tag

How can I set custom data- attribute on the {{#linkTo}} helper? I want use this: {{#linkTo "foo" data-toggle="dropdown"}}foo{{/linkTo}} and the result should look like this:
Lux
  • 17,835
  • 5
  • 43
  • 73
18
votes
2 answers

Custom HTML attribute requires a custom helper?

I'm trying to create a form with some custom data attributes on the inputs: This seemed like a nice clean way to have easy front-end access (haha!) with jquery:…
RSG
  • 7,013
  • 6
  • 36
  • 51
18
votes
1 answer

How does html5-script-attribute "data-main" work?

For example requireJS uses following syntax: and in its documentation you can read: data-main attribute tells require.js to load scripts/main.js after require.js loads How is…
user2227400
18
votes
6 answers

Accessing HTML data attribute on-click via .data() doesn't work

On click of one of the options I am trying to get the data value from the 'ul li a' and place it into button below, I've set up a JS fiddle example here: https://jsfiddle.net/q5j8z/4/ But cant seem to get it working $('ul li a').click(function(e)…
Adam
  • 812
  • 3
  • 13
  • 22
18
votes
2 answers

jQuery Validate custom messages

I have an input that I want to display a custom error message on when the user doesn't fill it out. How do I add a custom error message to this…
Jesse Atkinson
  • 10,586
  • 13
  • 42
  • 45
18
votes
3 answers

rails and html data attributes: use dash(-) or underscore(_)?

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",…
benams
  • 4,308
  • 9
  • 32
  • 74
17
votes
6 answers

Attribute options for jQuery UI datepicker

I have this input with data-options attribute. I would like to load the datepicker using the data-options value as options. Now with the following code, doesn't…
Vixed
  • 3,429
  • 5
  • 37
  • 68
17
votes
3 answers

Using CSS attr() function and data-tags for animation timings

I'm wondering wether I can combine data-tags with animations in CSS. I have a list of an undefined amount of items which are rendered by a javascript templating engine. As soon as the JS finished rendering them I would like to fade them in one after…
Kai Zwier
  • 183
  • 1
  • 8
17
votes
3 answers

How to add data-attribute to the form tag in simple_form?

I'm using garlic.js to validate my forms. Garlic.js recommends adding a data-attribute on the form tag. Here's what I need to generate:
I'm having issues to generate this data attribute on the form tag. I tried…
Renato Carvalho
  • 451
  • 2
  • 6
  • 14
16
votes
7 answers

Remove multiple html5 data-attributes with jquery

So jquery api says the following: Removing data from jQuery's internal .data() cache does not effect any HTML5 data- attributes in a document; use .removeAttr() to remove those. I have no problem removing a single data-attribute.
Joonas
  • 7,227
  • 9
  • 40
  • 65
16
votes
3 answers

Accessing data attribute using jquery returns undefined?

Inside my view i have a button as follow: My div
Script function updateClick() { var id =…
Maro
  • 2,579
  • 9
  • 42
  • 79