JQuery plugin – showAge

Updated: See the plugin page.

I thought I would experiment, write and share a JQuery plugin. I have written simple plugins for applications, but this is a first time for a public release plugin. The plugin is designed to manipulate dates. For any date on the page, you can transform the date to show its real age. To overcome a few huddles, I will explain.

JavaScript DateTime is not a reliable source, for getting the current date. JavaScript runs on the clients machine, in turn it relies on the client system clock to be 100% correct. While this shouldn’t generally be an issue, it’s not reliable. So, to get the real date I am calling a .NET web service and returning JSON using JQuery’s built-in mechanism for handling this.

To return JSON from an ASMX service, JQuery can be setup like so:

I have simplified JQuery’s mechanism in the plugin, and by no means you don’t have to use this. However for my case, I wrapped it inside a function for ease. This is how it should be setup to request JSON from an ASMX web service. The web service will see in the request headers JSON is requested, and therefore return JSON. So how do we do this?

You can provide your own mechanism for getting the current date, but this shows how it works.

The function call to getJson() calls the web service, which returns an anonymous object. Notice that month is returning month – 1. Why is this? Well JavaScript date begins in January at Month 0, in .NET January begins at Month 1. So, we do a bit of correction there. The web service knows that an XML Request (Ajax Request) is being sent but also with the content type JSON. The web service is clever enough to know how to handle this async JSON request and will return a JSON object. The callback function returns a data object with our date. Do notice however that data.d is used. “.d” to access our returns object, as designed by Microsoft.

The plugin has the following options.

TodaysDate (optional): – this is a JavaScript Date object, to be set to the current date. (Default value sets the current date using JavaScript).

InsertMode (optional): – this controls how the age is inserted. (Default value is set to ‘append’).

CustomCompare (optional): – this takes a function to compare dates and return the number of years between them. (Default uses its own compare).

InsertMode consists of the following options.

‘replace’ – replace the date with the real age.

‘append’ – append the date with real age.

‘prepend’ – prepend the date with the real age.

In its simplist form:

Will display:

Although the example is a VS project, the JQuery plugin is not .NET specific.

Download – v1.1

Advertisement