Accessing HTML5 data attributes

Question

I'm trying to work with HTML5 data-* attributes. However I'm using the EasyUI framework and it's being problematic.

HTML5 defines options are set as follows: <div data-options="{region:'north', title:'North Region', border:true}">

But EasyUI enforces they are set like (no curly brackets): <div data-options="region:'north', title:'North Region', border:true">

Is there a way to access the attribute object without writing my own parser function? If I have to I must but I figure there must be a better way.

Thanks for any help.

First Step: File a bug with EasyUI. Second step: make the attribute valid JSON so you can parse it. — epascarello, Nov 20 '12 at 19:12
Neither of those two forms are valid JSON, so yes you have to write your own parser. — Pointy, Nov 20 '12 at 19:12
You can access the custom attributes with jQuery .data() or with .attr() — Jay Blanchard, Nov 20 '12 at 19:12
@epascarello : Unfortunately this seems to be a "feature" of their framework. — user1389920, Nov 20 '12 at 19:15
@Jay : Yes, I am aware of this but my question relates to the data format not being compliant with what is expected. The standard functions cannot handle the format. — user1389920, Nov 20 '12 at 19:16
Have you tried escaping or urlencoding the value when you set `data-options`? — Julian H. Lam, Nov 20 '12 at 19:19
What's wrong with data-region="north" data-title="North region" data-border="true" or data-options-region="north" etc — Dave, Nov 20 '12 at 19:20

Kevin B · Accepted Answer · 2012-11-20T19:26:06.923

1

Looking at the source, there is a method that does this.

$.parser.parseOptions(element);

Demo with just the method extracted: http://jsfiddle.net/FnJAE/

Note: this method is not documented, therefore it is subject to change without notice.

edited Nov 20 '12 at 19:26

answered Nov 20 '12 at 19:19

Kevin B

94,570
16
163
180

This does exactly what I want. Works perfectly. Thank you so much! – user1389920 Nov 20 '12 at 19:45

score 0 · Answer 2 · answered Nov 20 '12 at 19:32

0

If you know it will always be formatted as an object you could just:

jsonData = JSON.parse("{" + element + "}");

answered Nov 20 '12 at 19:32

jeremy

4,294
3
22
36

This won't work, even with the brackets it is still invalid json. – Kevin B Nov 20 '12 at 19:37

score 0 · Answer 3 · answered Nov 20 '12 at 20:05

Just FYI, you really dont have to do all that parsing. Though your HTML does need some change in quotes: _{See Reference jQuery.Data() HTML5}

HTML

<div id="Bob" data-options='{"region":"north", "title":"North Region", "border":"true"}'></div>

Script

console.log($("#Bob").data("options").title);
// Will return String "North Region"

console.log($("#Bob").data("options").region);
// Will return String "north"

console.log($("#Bob").data("options").border);
// Will return String "true"

console.log($("#Bob").data("options")
// will return a JSON Object but it is EASY to convert to Array
var eleData = $("#Bob").data("options"),
    eleArray = new Array();
for (x in eleData) { eleArray[x] = eleData[x]; }

I agree, fix the data to be correct json, but that isn't an option without modifying the easyui core (which wouldn't really be that difficult, tbh). http://www.jeasyui.com/documentation/index.php# — Kevin B, Nov 20 '12 at 20:11
I still say jQueryUI is 100x better and much more beneficial. — SpYk3HH, Nov 20 '12 at 20:18

Accessing HTML5 data attributes

3 Answers3