Saving the Selected Date to Session Storage

Ultimately, what we want to do is set up the Date panel so that when it's displayed, it will check the database for any records entered for that date and display them as an edge-to-edge list. This requires that the Date panel know which date the user tapped on the Dates panel.

We also want to allow the user to add and delete entries from the database, so we'll have to add support for the + button that already exists on the Date panel, and for the Delete button in the Date panel entry template (more on this later).

The first step is to let the Date panel know which item the user clicked when she navigated to it from the Dates panel. With this piece of information, you can calculate the appropriate date context. To do so, you need to add some lines to the document ready function in kilo.js:

$(document).ready(function(){

$('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').click(function(){ var dayOffset = this.id; var date = new Date(); date.setDate(date.getDate() - dayOffset); sessionStorage.currentDate = date.getMonth() + 1 + '/' +

refreshEntries();©

On this line, jQuery's click() function binds the JavaScript code that follows to the click event of the links on the Dates panel.

This line of code grabs the ID of the clicked object and stores it in the dayOffset variable. As you may recall, the links on the Dates panel have IDs ranging from 0 to 5, so the ID of the clicked link will correspond to the number of days needed to calculate the clicked date (i.e., 0 days in the past equals today, 1 day in the past equals yesterday, 2 days in the past equals the day before yesterday).

In this context, the this keyword will contain a reference to the object that was the target of the click event.

© This line creates a new JavaScript Date object and stores it in a variable named date. Initially, this date will be set to the particular moment in time that it was created, so on the next line, we subtract the dayOffset from the result of the getDate() function and use setDate() to change the date to the selected date (a dayOffset of 0 would be today, 1 would be yesterday, and so on).

O This code builds a MM/DD/YYYY-formatted date string and saves it to session Storage as currentDate.

The getMonth() method of the Date object returns values from 0—11, January being 0. Therefore, we have to add 1 to generate the correct value for the formatted string.

© Finally, we call the refreshEntries() function. The job of the refreshEntries()

function is to update the incoming Date panel appropriately based on the date the user tapped on the Dates panel. For now, we'll just set it to update the toolbar title of the Dates panel with the selected date so you can see it's working. Without it, you'd just see the word "Date," as shown in Figure 5-1. Figure 5-2 shows the refreshEntries() function in action. Add the following function to kilo.js:

function refreshEntries() {

var currentDate = sessionStorage.currentDate; $('#date hl').text(currentDate);

Next, we'll move on to a more powerful and complex client-side data storage method that we'll use to store the user's food entries on the Date panel.

0 0

Post a comment