Neal Grosskopf Dot Com A NG Designs Site

Toolbar

• Skip To
  • Menu
  • Content
• Validate
  • HTML
  • CSS
  • WAI
• Font Size
  • Small
  • Medium
  • Large
  • Extra Large
• Account
  • Create Account
  • Login

Navigation

• Home
• Interact
  • Blog
  • Message Board
  • Open Links
  • Open Videos

  • Photo Gallery
  • Polls
  • Reviews
  • Geek Speak
• Designs
  • View All Designs
  • Professional
  • Corporate
  • Templates

  • Personal
  • Club
  • NG Designs
  • Web Guides
• Files
  • Artwork
  • Wallpapers

  • My File Downloads
• Extras
  • Bookmarklets
  • The Magic 8-Ball

  • Career Builder RSS Feed Generator
  • Monster.com RSS Feed Generator

Everything You Need to Know About jQuery's .data() Method

• Actions
  • View All
  • View Article Statistics
  • View User Statistics
  • Search
  • Subscribe to RSS Feed

Recent Articles:

• Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
• Tracking Internal Website Campaigns With Google Analytics and PHP
• Everything You Need to Know About jQuery's .data() Method
• Google vs. China: How It Will Affect Web Workers
• Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

View All

---

Subscribe To Feed

Subscribers

---

May 17

I was recently working on a project that required users to input numbers, formatted as currency into textboxes and then calculate said numbers with other formatted textboxes. My client-side calculator had 34+ textboxes. I was a bit worried that I'd need to create javascript variables for each of these textboxes and possibly as a number & formatted variable. Another requirement was if a user backspaces all of the numbers in a textbox, that it should return to it's original number.

Say Goodbye to Variables With jQuery's .data() Method

Having read up on jQuery's .data() method briefly in the documentation a few times in the past, I wondered to myself it that would be a possible solution. It a nutshell, the .data() method allows developers to store data inside elements in an array format. In the past I might have done something like this to store data:

<a href="/" rel="some data" rev="some more data" title="maybe even more data">Link With Data</a>

While this worked great there was a few drawbacks. For one it was improperly using attributes in a way the W3C spec never intended. Second I was limited to the amount of unique data I could store due to limits to the number of attributes at my disposal

Enter .data()

Going back to my original problem, with .data() I can now store data inside elements like so:

$("input").data("original", "$1.75"); $("input").data("currency", "$1.50"); $("input").data("decimal", 1.5);

To retrieve that data it's as simple as this:

$("input").data("original"); $("input").data("currency"); $("input").data("decimal");

Shorthand

jQuery also offers a shorthand method of assigning multiple values to a single element. Below is a shorthand variation of my above statements:

$("input").data("numbers",{original: "$1.75", currency: "$1.50", decimal: 1.5});

To retrieve these values it's also a bit different since they're now included in a single array called numbers

$("input").data("numbers").original; $("input").data("numbers").currency; $("input").data("numbers").decimal;

Removing Values

Below is jQuery's method of removing data:

$("input").removeData("currency");

Final Words

I found this technique to be easier to understand while I developed the application. Also, since I was already querying the element to get the user's input it was just another line of code to get other values I stored inside the element.

Further Reading

Feel free to check out jQuery's documentation on the .data() method. I also found a Firebug plug that allows you to inspect values assigned to elements which makes debugging easier.

Tags: jquery ( Add Tag )

Replies:

• 

  Eric Hynds
  #1

  Mon. May 17, 7:16:10 PM

  A few more noteworthy points:
  
  1. as of 1.4, event handlers are stored inside the elem's data("events") object. therefore, you see everything bound to an element by referencing the events data key.
  
  2. html5 spec supports data-* attributes, which answers your point about storing info in random attributes. might make more sense to go this route and use $(elem).attr("data-currency") instead, depending on the situation.
  
  3. using $(elem).data() requires that the DOM be queried before saving data into the cache. If you're just working with ONE element, this performance hit can be avoided by using $.data(elem, key, value);

• 

  Jan-Marten de Boer
  #2

  Thu. May 20, 6:09:51 PM

  Now, i'm sorry if i'm a bit of a whiner, but what actually is the advantage over using a classic JS array? And when, may i ask, is there any situation where it is proper to store temporary data inside an element?

• 

  Neal Grosskopf
  #3

  Fri. May 21, 7:38:58 PM

  I used this in on a calculator with 34+ textboxes, with each textbox containing multiple formatting options. Sure, I could have created variables or array for each of these but then I'd have to manage and track all of those. It would get a bit out of control.

Font Size:

• A
• A
• A
• A

Search:

Places:

• Blog
• Message Board
• Chat Room
• Geek Speak
• Open Videos
• Reviews
• Tag Cloud

Site

• About
• Contact Me
• Site Map
• Site Search

Interact

• Blog
• Geek Speak
• Message Board
• Open Links

• Open Videos
• Photo Gallery
• Polls
• Reviews

Random Stuff

• Hosting by FatCow
• © Copyright 2005 - 2010
• Modified: Thursday, August 05, 2010
• Load Time: 0.04 Seconds