New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] .data() keys do not match HTML5 data specification when two dashes are used #2070

Closed
kevin-brown opened this Issue Feb 7, 2015 · 1 comment

Comments

Projects
None yet
3 participants
@kevin-brown

jQuery has provided the .data() method since 1.4, and in 1.6 there was a change that made it conform to the HTML5 data specification. According to the specification, the key nested-single should be converted into nestedSingle, and nested--double should be converted into nested-Double.

The .data() method allows for no arguments to be provided, which the docs says should return all of the values as an object

Calling .data() with no parameters retrieves all of the values as a JavaScript object.

In jQuery 2.x, this works correctly and $(element).data() matches element.dataset as one would expect.

In jQuery 1.x, data attributes with two consecutive dashes (--) are converted the same way as data attributes containing a single dash. This means that nested-single and nested--single are treated in the same way, both being converted to nestedSingle.

Special notes

In 1.6 through 1.6.3, attributes containing two dashes in a row are not included in the returned object. This appeared to be fixed in 8e8fa6d, which makes 1.6.4 the first version where this bug appears in 1.x.

Tests

HTML code used for testing

<div data-one="none" data-nested-single="single" data-nested--double="double"></div>

jQuery .data test

var data = $('div').data();

assert.equal(data['one'], 'none');
assert.equal(data['nestedSingle'], 'single');
assert.equal(data['nested-Double'], 'double');

This will pass in 2.x, but fail in 1.x.

HTML5 dataset test

var data = $('div')[0].dataset;

assert.equal(data['one'], 'none');
assert.equal(data['nestedSingle'], 'single');
assert.equal(data['nested-Double'], 'double');

This passes, as expected.


/refs select2/select2#2969
/cc @loic

@gibson042

This comment has been minimized.

Show comment
Hide comment
@gibson042

gibson042 Feb 7, 2015

Member

This is definitely related to #1751 and will be fixed by (and supports) its solution, but is arguably distinct.

Member

gibson042 commented Feb 7, 2015

This is definitely related to #1751 and will be fixed by (and supports) its solution, but is arguably distinct.

@timmywil timmywil added the Blocker label Feb 9, 2015

kevin-brown added a commit to select2/select2 that referenced this issue Feb 24, 2015

Added `.dataset` fallback for jQuery 1.x
As we have established already, jQuery 1.x does not correctly handle
`data-*` attributes where there are multiple dashes.  This makes it
so we can still handle nested options when working with jQuery 1.x
by using the `.dataset` option that is supported by all major
browsers as well as IE 11+.

Browser support tables for the `.dataset` attributes can be found at
http://caniuse.com/dataset

A notice was already added to the documentation about this in
caeb0ec.

The related ticket in the jQuery repository about this issue is
jquery/jquery#2070.

This closes #2969.

@timmywil timmywil self-assigned this Mar 4, 2015

@timmywil timmywil closed this in 172cad8 May 4, 2015

timmywil added a commit that referenced this issue May 4, 2015

@gibson042 gibson042 added this to the 3.0.0 milestone Jul 13, 2015

@lock lock bot locked as resolved and limited conversation to collaborators Jun 19, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.