HTML and CSS Reference
In-Depth Information
//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
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.
Search WWH ::

Custom Search