HTML data attributes are one of the neat features of HTML5 that give us a lot of flexibility.
We can use them for a variety of things (and abused for just as much), but the general idea behind the attribute, according to MDN, is this:
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or setUserData.
Yes, it reads a bit long. Consider it like this, though:
Data attributes provide a way to save extra information about an element in a semantic way without using conventional hacks (that so many of us are used to using).
Though there are a variety of ways in which this attribute can be used, I’ve found it to be useful when working with a front-end element that’s part of a dynamic set of larger elements.
Here’s a simple example of how to use the HTML data attributes and Ajax.
HTML Data Attributes and Ajax
As with the majority of the content of this site, the examples will are done so within the context of WordPress, but the principles remain the same.
1. Starting with HTML
Let’s say that we have two types of input:
And let’s say that the first contains a set of default elements and the second is designed for the user to specify their own, custom content.
The markup might look something like this:
Everything looks like common HTML save for the
data-type attribute which I’ve added. Here, one element holds the value of “default” and one element holds the value of “custom.”
2. Send It To The Server
For this example, let’s say that we’re going to take an element that has been chosen regardless of if it is a default option or a custom option and then send its value across the wire to the server.
Since we’re using the WordPress Ajax API, we’ll need to specify the method that we’re going to use and the data, and the type of data.
If we’re using a custom element, then the code may look like this:
Of course, this example is overly simplified.
The idea behind this is that, in a more elaborate case, you’ll have multiple elements of the
default data-type and multiple elements of the
custom data-type, you’ll need to traverse the set, and then build up a proper array or collection to send to the server.
But you get the idea, right?
response as JSON.
I’ll show why I’m doing this in the following step.
3. Save It To The Database
Once we’re on the server, we can look at the incoming data, separate it by the data type (which will either be “default” or “custom”) and then add them to the appropriate record:
Once done, we can return a JSON response to the client-side containing what the database contains just in case we want to inspect it, display it, or something else.
Granted, this is a bit of a contrived example, but the point is that we can use a custom
data attribute to store information about our elements and then use that to save it to the database.
In a more realistic case, you’ll need to collect a larger list of values and perhaps sort them by the
data-type. A traditional iterator is likely not the best idea if there are a lot of elements. But I digress.