Language

Custom Validators using Client Side JavaScript

2/11/2007

Custom Validators using Client Side JavaScript In my latest project I am really enjoying using the Ajax Control Toolkit, particularly the ModalPopupExtender. I've been using the popup panels to capture data, but I needed to validate the data that a user enters into certain fields. ASP.net's validators are the obvious choice, but when you have employed an AJAX control you need to validate the entry on the client's browser. This is easy to do using the '''ClientValidationFunction''' attribute of the validator. then create a JavaScript function to do the validation. Here I have created a Regular Expression to validate decimals. Then simply set the args.IsValid property to either true or false and return. In this example I have used the ScriptManager to write out a JavaScript variable ('''DiscountPercentageId''') with the ClientID of the ASP.net TextBox I'm validating. You'll also notice my GetElement function to handle the browser compatibility. I hope this proves useful in your next AJAXian web application. ;-)

Date and Time Functions

28/7/2006

Date and Time Functions Here's a handy reference for all of your JavaScript date/time needs. ||'''Function'''||'''Description'''||'''Returned Values'''|| ||getDate(), getUTCDate()||Day of the month||1-31|| ||getDay(), getUTCDay()||Day of the week (integer)||0-6|| ||getFullYear(), getUTCFullYear()||Year (full four digit)||1900+|| ||getHours(), getUTCHours()||Hour of the day (integer)||0-23|| ||getMilliseconds(), getUTCMilliseconds()||Milliseconds (since last second)||0-999|| ||getMinutes(), getUTCMinutes()||Minutes (since last hour)||0-59|| ||getMonth(), getUTCMonth()||Month||0-11|| ||getSeconds(), getUTCSeconds()||Seconds (since last minute)||0-59|| ||getTime()||Number of milliseconds since 1 January 1970|| ||getTimezoneOffset()||Difference between local time and GMT in minutes||0-1439|| ||getYear()||Year||0-99 for years between 1900-1999, Four digit for 2000+|| ||parse()||Returns the number of milliseconds since midnight 1 January 1970 for a given date and time string passed to it.|| ||setDate(), setUTCDate()||Sets the day, given a number between 1-31||Date in milliseconds|| ||setFullYear(), setUTCFullYear()||Sets the year, given a four digit number||Date in milliseconds|| ||setHours(), setUTCHours()||Sets the hour, given a number between 0-23||Date in milliseconds|| ||setMilliseconds(), setUTCMilliseconds()||Sets the milliseconds, given a number||Date in milliseconds|| ||setMinutes(), setUTCMinutes()||Sets the minutes, given a number between 0-59||Date in milliseconds|| ||setMonth(), setUTCMonth()||Sets the month, given a number between 0-11||Date in milliseconds|| ||setSeconds(), setUTCSeconds()||Sets the seconds,l given a number between 0-59||Date in milliseconds|| ||setTime()||Sets the date, given the number of milliseconds since 1 January 1970||Date in milliseconds|| ||setYear()||Sets the year, given either a two digit or four digit number||Date in milliseconds|| ||toGMTString(), toUTCString()||GMT date and time as a string||day dd mmm yyyy hh:mm:ss GMT|| ||toLocaleString()||Local date and time as a string||Depends on operating system, locale, and browser|| ||toString()||Local date and time as a string||Depends on operating system, locale, and browser|| ||UTC()||Returns the number of milliseconds since 1 January 1970 for a given date in year, month, day (and optionally, hours, minutes, seconds, and milliseconds)||Date in milliseconds|| ||valueOf()||Number of milliseconds since 1 January 1970||Date in milliseconds||

Garmin and Google Maps

19/6/2006

Garmin and Google Maps The bought a Garmin Forerunner recently which is a really cool piece of kit but the maps that come with it are very poor. Google maps has an API that allows you to integrate these rich maps into your own web applications. Garmin has the option to export your training history as an XML file. This XML file contains not just Latitude and Longitude points but also your heart rate, the time, elevation and what you were doing (i.e. cycling or running). From these you can work out more details such as how steep the hill was , how fast you were running and how hard your heart was pumping. Google provides a well documented API largely in Javascript. The current site, just shows a list of bike rides from the GPS XML extract and plots the ride on the map. It animates the ride by overlaying a small section of the ride in red and using setTimeout in a loop to keep it moving. Some of the key aspects are explained below... A reference to the google maps API script is included as described in the documentation. A map is created, on the server the width and height of the map is calculated (by looking at east/west-most and north/south-most points) and the javascript created to ensure that the map is centred and zoomed appropriately. The zoom model is a logarithmic one and I had to do a little relunctant maths to create this function. The source javascript shows an array of GLatLng objects. These are google map representations of a point on a map. The map objects addOverlay method is called to add a GPolyline object (a line) to the line. The animation is acheived by creating a GPolyline from a few points at a time. The GPolyline is then removed and replaced a bit further along the ride (which is basically an array).

Prompting the user

13/6/2006

Prompting the user There are three functions you can call which will force the user to acknowledge them. These are * alert() * confirm() * prompt() alert() If you would like to present the user with a notice before allowing them to continue using your web page, you can display an alert. See Demo confirm() To prompt the user with a Yes/No message box you can call confirm, using its return value as the result. prompt() xxx #h#