[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

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
Member

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 kevin-brown added a commit to select2/select2 that referenced this issue Feb 24, 2015
@kevin-brown kevin-brown 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.
a9f6d64
@timmywil timmywil self-assigned this Mar 4, 2015
@timmywil timmywil pushed a commit that closed this issue May 4, 2015
Timmy Willison Data: camelCasing should not ignore case
Fixes gh-2070
172cad8
@timmywil timmywil closed this in 172cad8 May 4, 2015
@timmywil timmywil pushed a commit that referenced this issue May 4, 2015
Timmy Willison Data: camelCasing should not ignore case
Fixes gh-2070
cf16f86
@gibson042 gibson042 added this to the 3.0.0 milestone Jul 13, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment