Item Selection and Addition to the Cart
|
Inter-Window Communications
Now that the pop-up calendar has been designed, all that remains is to create it and have it automatically fill in a form field for the user. First you need a form to fill in, though. Here is a page that will be part of the Center Park site; the file name of this example is AddTask.html:
<html> <head> <title>Center Park Add Task</title> <script language="JavaScript"> <!- var dateElement; function openDatePicker( target ) { dateElement = target; var ieSize = "width=380,height=255"; var navSize = "width=480,height=295"; var isNav = navigator.appName == "Netscape"; window.open( "PopupCalendar.html", "calendar", "menubar=no,resizable=no,scrollbars=no," + "status=yes,toolbar=no," + ( isNav ? navSize : ieSize ) ); } function setDate( date ) { dateElement.value = date; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } // --> </script> </head> <body> <br> <br> <i>Center Park Task Scheduler for</i><b> <script language="JavaScript"> <!-- document.write( getCookieValue( "username" ) ); // --> </script></b>. <br><br> <br><br> <form name="taskForm" onSubmit="JavaScript: return( false );"> <center> <table border="1" width="75%"> <tr> <td width="100%" colspan="2"><b>Schedule Task</b></td> </tr> <tr> <td width="50%"> Date of task: <input type="text" name="date" size="10"> <input type="button" value="..." onClick="JavaScript: openDatePicker(document.taskForm.date);"> </td> <td width="50%"> Task description (HTML is ok):<br> <textarea rows="7" cols="35"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="Submit" name="B1"> </td> </tr> </table> </center> </form> </body> </html> One of these fields requires a date from the user. Because dates can be represented in so many different ways, and because parsing all the different ways into the format you want is so difficult, it is a good idea to create a way for the user to fill in the field automatically, which is the one and only purpose of the pop-up calendar. Two functions are required to automatically fill in the form field for the user. The openDatePicker() function, shown below, will create the pop-up window and display it:
var dateElement; function openDatePicker( target ) { dateElement = target; var ieSize = "width=380,height=255"; var navSize = "width=480,height=295"; var isNav = navigator.appName == "Netscape"; window.open( "PopupCalendar.html", "calendar", "menubar=no,resizable=no,scrollbars=no," + "status=yes,toolbar=no," + ( isNav ? navSize : ieSize ) ); } The one parameter that the openDatePicker() takes is the field in which the date value will be placed after the user chooses a date from the pop-up calendar. The second function,
function setDate( date ) { dateElement.value = date; } will fill in the form field with the date value after the pop-up window has closed.
You may have noticed that the setDate() function is never called from the page. There is a good reason for that—the function is called from the pop-up calendar after the user selects a date. In the previous examples, the onSelect() function for the pop-up window was not filled in. If you were to replace the blank function with
function onSelect() { window.opener.setDate( document.theForm.date.value ); self.close(); } you would not only be completing the functionality of the pop-up calendar, but you would also allow the pop-up calendar to talk to its parent window. When a user selects a date on the pop-up calendar, the calendar temporarily stores the selected date in a hidden form field and then calls the onSelect() function. The onSelect() function calls the setDate() function on its parent window with the date value that was selected and then closes the pop-up calendar. Once the setDate() function is called on the parent window, the date has already been selected and the pop-up calendar has been closed, so the only thing remaining to do is fill in the form for the user.
Here is the complete source code for the pop-up calendar. It should be placed in a file named PopupCalendar.html in order to work with the examples in this chapter. Figure 15.4 illustrates this in action.
Figure 15.4: By utilizing a pop-up calendar in this way, you can allow users an easy and accurate method of selecting a specific date. Note that this pop-up functionality can carry over to other form functions
<html> <head> <title>Date Chooser</title> <style type="text/css"> <!- .mono{ font-family: monospace; } --> </style> <script language="JavaScript"> <!- var now = new Date(); var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 ); var months = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ); var urlquery = location.href.split( "?" ); if( urlquery[1] ) { var params = urlquery[1].split( "&" ); var m = ( params[0] ? params[0].split( "=" )[1] 1 : fixMonth( now.getMonth() ) ); var y = ( params[1] ? params[1].split( "=" )[1] : fixYear( now.getYear() ) ); month = new Date( y, m, 1 ); function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); } function fixMonth( month ) { return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) ); } function getNumberDays( d ) { switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } function getEnding( number ) { if( number > 10 && number < 20 ) return( "th" ); switch( number % 10 ) { case 0: case 4: case 5: case 6: case 7: case 8: case 9: return( "th" ); case 1: return( "st" ); case 2: return( "nd" ); case 3: return( "rd" ); } } function onSelect() { window.opener.setDate( document.theForm.date.value ); self.close(); } // --> </script> </head> <body> <form name="theForm"> <table border="1" width="75%" style="border-collapse: collapse"> <tr> <td align="left" colspan=2> <b>Month:</b> <input type="text" name="Month" size="5"> <script language="JavaScript"> <!- document.theForm.Month.value = fixMonth( month.getMonth() + 1 ); // --> </script> </td> <td colspan=3> <center> <b><script language="JavaScript"> <!- document.write( months[fixMonth( month.getMonth() )] + " " + fixYear( month.getYear() ) ); // --> </script></b><br> <input type="submit" value="Submit"> </center> </td> <td align="right" colspan=2> <b>Year:</b> <input type="text" name="Year" size="5"> <script language="JavaScript"> <!- document.theForm.Year.value = fixYear( month.getYear() ); // --> </script> </td> </tr> <tr> <td width="14%"><b><i>Sun</i></b></td> <td width="14%"><b><i>Mon</i></b></td> <td width="14%"><b><i>Tue</i></b></td> ] <td width="14%"><b><i>Wed</i></b></td> <td width="14%"><b><i>Thu</i></b></td> <td width="14%"><b><i>Fri</i></b></td> <td width="14%"><b><i>Sat</i></b></td> </tr> <tr> <script language="JavaScript"> <!- var startDay = month.getDay(); for( i = 0 ; i < startDay ; i++ ) { document.write( "<td></td>" ); } var numDays = getNumberDays( month ); for( i = 1 ; i < numDays + 1 ; i++ ) { if( ( i + startDay ) % 7 == 1 ) { document.write( "</tr><tr>" ); } document.write( "<td><center><input type='button' " + "onClick='JavaScript: document.theForm.date.value=\"" + fixMonth( month.getMonth() + 1 ) + "/" + i + "/" + fixYear( month.getYear() ) + "\"; onSelect();' " + "value='" + (i < 10 ? " " : "") + i + getEnding( i ) + "' " + "class='mono'>" + "</center></td>" ); } // --> </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html>
|
EAN: 2147483647
Pages: 130