{"id":705,"date":"2016-02-22T09:10:32","date_gmt":"2016-02-22T17:10:32","guid":{"rendered":"http:\/\/kagan.mactane.org\/blog\/?p=705"},"modified":"2016-02-22T09:10:32","modified_gmt":"2016-02-22T17:10:32","slug":"on-jquerys-data-call-syntax","status":"publish","type":"post","link":"https:\/\/kagan.mactane.org\/blog\/2016\/02\/22\/on-jquerys-data-call-syntax\/","title":{"rendered":"On jQuery’s .data()<\/code> Call Syntax"},"content":{"rendered":"

I recently had a developer on my team who had some trouble with jQuery’s $(...).data()<\/code> syntax. In case anyone else has trouble, maybe I can clarify things a bit. I’m anonymizing all the code involved, of course.<\/p>\n

We wanted to make certain items have certain behaviors under certain circumstances. And so we set up a “whatToDo” data attribute, which could be any of certain values. Items with the attribute would have a class “specialItem”, to make them easy to find.<\/p>\n

So the HTML included things like these:<\/p>\n

\n\t<div class="specialItem" data-what-to-do="activate">Text Here<\/div>
\n\t…
\n\t<div class="specialItem" data-what-to-do="react">Text Here<\/div>
\n\t…
\n\t<div class="specialItem" data-what-to-do="solidify">Text Here<\/div>\n<\/div>\n

So far, we only care about when it’s set to activate; the other values are for future extensibility. So my co-worker checked in code that read:<\/p>\n

\n$(".specialItem").each(function() {
\n    if ($(this).data("data-what-to-do") == "activate") {
\n        \/\/ set it up as desired
\n    }
\n});\n<\/div>\n

In my co-worker’s defense, the setup code that I’ve elided with a comment actually involved a call to a poorly-understood third-party API that we had every reason to expect might prove somewhat difficult. So when he tested and found things not working, he immediately assumed there was something wrong in his third-party call and came to me for help with that.<\/p>\n

But I looked at his data()<\/code> call and pointed out that that<\/em> was where his problem really was. Because data("data-what-to-do")<\/code> will always return undefined<\/code>. And that’s because the leading data-<\/span> is not<\/em> part of the name.<\/strong><\/p>\n

Calling data("data-what-to-do")<\/code> will try to retrieve a value from the HTML <div class="specialItem" data-data<\/strong>-what-to-do="activate"><\/code> — note that double “data” there.<\/p>\n

In fact, because the attribute names get their dashes converted to CamelCase, as described<\/a> in various<\/a> spec documents<\/a>, you actually want to use data("whatToDo")<\/code> to read the data-what-to-do<\/code> attribute. The code should be:<\/p>\n

if ($(this).data("whatToDo") == "activate")<\/code><\/p>\n

It turns out that current versions of jQuery will actually throw you a bone if you don’t realize the CamelCasing thing. The following will<\/em> work, even though it shouldn’t:<\/p>\n

if ($(this).data("what-to-do") == "activate")<\/code><\/p>\n

But putting that leading data-<\/code> on it will make it fail<\/strong>.<\/p>\n

Summary<\/h3>\n

Here’s the “in a nutshell” version of all this. If you’re trying to read the attribute data-what-to-do<\/code>, then…<\/p>\n

\n\t$(node).data("whatToDo") \/\/ what you really should write<\/p>\n

\t$(node).data("what-to-do") \/\/ will work, even if it shouldn’t<\/p>\n

\t$(node).data("data-<\/span>what-to-do") \/\/ WILL FAIL<\/strong>\n<\/div>\n

I hope someone finds this helpful.<\/p>\n","protected":false},"excerpt":{"rendered":"

I recently had a developer on my team who had some trouble with jQuery’s $(…).data() syntax. In case anyone else has trouble, maybe I can clarify things a bit. I’m anonymizing all the code involved, of course. We wanted to make certain items have certain behaviors under certain circumstances. And so we set up a “whatToDo” […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7,83,140,69,74,31],"_links":{"self":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/705"}],"collection":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":7,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":712,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions\/712"}],"wp:attachment":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}