StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
6828180
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
18
CommunityOwnedDate
CreationDate
2011-07-26T09:47:31.283
FavoriteCount
0
LastActivityDate
2015-07-25T17:50:32.720
LastEditDate
2017-05-23T11:54:35.077
LastEditorUserId
-1
OwnerUserId
637889
ParentId
6827810
PostTypeId
2
Score
239
ViewCount
0
LastEditorDisplayName
text
Body
It is mentioned in the <a href="http://api.jquery.com/data" rel="nofollow noreferrer"><code>.data()</code> documentation</a> <blockquote> The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery) </blockquote> This was also covered on <a href="https://stackoverflow.com/questions/5507718/why-dont-changes-to-jquery-fn-data-update-the-corresponding-html-5-data-at/5507828#5507828">Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?</a> The demo on my original answer below doesn't seem to work any more. Updated answer Again, from the <a href="http://api.jquery.com/data" rel="nofollow noreferrer"><code>.data()</code> documentation</a> <blockquote> The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification. </blockquote> So for <code><div data-role="page"></div></code> the following is true <code>$('div').data('role') === 'page'</code> I'm fairly sure that <code>$('div').data('data-role')</code> worked in the past but that doesn't seem to be the case any more. I've created a better showcase which logs to HTML rather than having to open up the Console and added an additional example of the multi-hyphen to camelCase <a href="http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes" rel="nofollow noreferrer">data- attributes</a> conversion. <a href="http://jsfiddle.net/nwh9ottk/4/" rel="nofollow noreferrer">Updated demo (2015-07-25)</a> Also see <a href="https://stackoverflow.com/questions/7261619/jquery-data-vs-attr">jQuery Data vs Attr?</a> HTML <pre><code><div id="changeMe" data-key="luke" data-another-key="vader"></div> <a href="#" id="changeData"></a> <table id="log"> <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr> </table> </code></pre> JavaScript (jQuery 1.6.2+) <pre><code>var $changeMe = $('#changeMe'); var $log = $('#log'); var logger; (logger = function(setter, getter, note) { note = note || ''; eval('$changeMe' + setter); var result = eval('$changeMe' + getter); $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>'); })('', ".data('key')", "Initial value"); $('#changeData').click(function() { // set data-key to new value logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke"); // try and set data-key via .attr and get via some methods logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda"); logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)"); logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object"); // bonus points logger('', ".data('data-key')", "expect undefined (cannot get via this method)"); logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>"); logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)"); return false; }); $('#changeData').click(); </code></pre> <hr> <a href="http://jsfiddle.net/R3LP9/1/" rel="nofollow noreferrer">Older demo</a> <hr> Original answer For this HTML: <pre><code><div id="foo" data-helptext="bar"></div> <a href="#" id="changeData">change data value</a> </code></pre> and this JavaScript (with jQuery 1.6.2) <pre><code>console.log($('#foo').data('helptext')); $('#changeData').click(function() { $('#foo').data('helptext', 'Testing 123'); // $('#foo').attr('data-helptext', 'Testing 123'); console.log($('#foo').data('data-helptext')); return false; }); </code></pre> <a href="http://jsfiddle.net/XFgXd/3/" rel="nofollow noreferrer">See demo</a> Using the <a href="https://developers.google.com/chrome-developer-tools/" rel="nofollow noreferrer">Chrome DevTools</a> Console to inspect the DOM, the <code>$('#foo').data('helptext', 'Testing 123');</code> does not update the value as seen in the Console but <code>$('#foo').attr('data-helptext', 'Testing 123');</code> does.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POUnable to set data attribute using jQuery Data() API
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USandyb
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POUnable to set data attribute using jQuery Data() API
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. CONot sure what has changed, but your fiddle demo returns undefined in chrome console
 singulars
 PostPostId
 PO
 UserUserId
 USmanubkk
2. COThanks, I'll update the demo.
 singulars
 PostPostId
 PO
 UserUserId
 USandyb

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.