HTML and CSS Reference
In-Depth Information
alert($(birthDateTxtbox).data('errorInvaliddate'));
return;
}
//make $.Ajax() request to update the database
alert('Data saved!');
});
The Save button's
click
event handler begins by grabbing a reference to the
BirthDate
and
HireDate
input fields. The
closest()
method returns the row that holds the input fields and the Save button. The
children()
method returns all the child elements of the table row. The
eq()
method then returns a table
cell at the specified index. Because the input fields are inside the table column, another call to the
children()
and
eq()
methods is necessary to grab the respective input fields.
The input fields hold the date value in yyyy-MM-dd format. These dates are converted into JavaScript
date
objects using a custom function
ToDate()
. The
ToDate()
function looks like this:
function ToDate(input) {
var parts = input.match(/(\d+)/g);
return new Date(parts[0], parts[1] - 1, parts[2]);
}
ToDate()
should be familiar, because you used it in Chapter 5. It essentially parses the supplied input
value and returns a JavaScript
date
object representing that value.
Next, the code checks the difference between the
HireDate
and
BirthDate
to determine if the
employee is at least 18 years old at the time of hiring. If not, an error message as specified in the
data-
error-invaliddate
custom data attribute is displayed to the user in an alert box. The jQuery
data()
method is used to retrieve the value of the
data-error-invaliddate
attribute.
Although the code doesn't actually save the changed data to the server, you can add that functionality
if the age validation succeeds. In Listing 6-18, a success message is displayed after the age check is
successful.
Summary
The HTML5 History API is a relatively small area of improvement, but it comes in handy in certain
scenarios. In particular, modern web applications rely on Ajax techniques extensively to render page
content without refreshing the entire page. At the same time, they need to take care of search engine
optimization and the user experience. The new HTML5 History API allows you to add entries in the history
programmatically. This way, you can also change the URL shown in the browser's address bar. When you
navigate through the history, the History API gives you a chance to synchronize the page content with the
URL being navigated to. The HTML5 History API not only provides a standard way of dealing with history
entries but also takes away the complexity otherwise involved in the implementation.
Custom data attributes (
data-*
) allow you to embed metadata about an HTML element. They aren't
processed by the browser and don't directly affect an element's behavior. You can use a DOM element's
dataset
property or the jQuery
data()
method to access
data-*
attributes.
Although the History API and custom data attributes let you deal with session history and metadata
respectively, there is also a frequent need to store and retrieve session data. Traditionally, cookies have
been used to store such data on the client side. The next chapter examines what is known as
web storage
—
the ability to store and retrieve data locally on the client side.
