Sharing new technologies with the community

XSPtalk - Notes / Domino and Web Development Blog

Quick tips - Introduction to power of jQuery

Chris Connor  19 November 2009 12:54:48 PM
 
Decided the best way to demo the power of jQuery was with the simplest piece of code. You have a series of date fields on a web form. On standard (non-xPages) domino there they are represented by a bunch of boring input text fields.

Now give them a class of say ".dateInput".

Image:Quick tips - Introduction to power of jQuery

Now with one piece of code - yes one you can apply a date picker widget to them all

$(".dateInput").datepicker({});

Thats it really simple - a really nice simple date picker that works on all good browsers. The power is the selector bit that allows you to apply functions, events, classes, fancy effects, css (you get the idea - the list goes on) to any series of elements (in this type by class - it could be id, attribute, name etc).

You want to stop people typing in them? Add this

$(".dateInput").attr("readonly",true);
$(".dateInput").css("backgroundColor","#efefef");

What is also great about this is that you can start to organise styling, coding into separate areas to make support and maintenance as easy as possible.

Powerfull stuff and really simple - that's what we like!
Comments

1sbanks  3/10/2010 4:18:07 PM  Quick tips - Introduction to power of jQuery

This is my first attempt at using jQuery so I have a few questions.

1. Where should the line - $(".dateInput").datepicker({}); - be placed?

2. Do these lines go on the individual fields? if so, into which property?

$(".dateInput").attr("readonly",true);

$(".dateInput").css("backgroundColor","#efefef");

Thanks

2ChrisC  3/10/2010 7:53:29 PM  Quick tips - Introduction to power of jQuery

There are few things you need to do when using jQuery. The article here on the blog takes you through a sortable table. The principles are the same.

1. Make sure you reference a copy of the the core jQuery files - place your references to this in the HTMLHeader

2. On the onload event you should need your code that manipulates the DOM

such as

$(document).ready(function(){

$(".dateInput").datepicker({});

$(".dateInput").attr("readonly",true);

$(".dateInput").css("backgroundColor","#efefef");

});

The following article provides some more information..

{ Link }

Have a look also on the jQuery website. Lots of superb documentation there.

Key things to have a look at are how you use the selectors to apply jQuery widgets, tools, effects etc.

Any questions please post a response...

3  4/13/2010 9:49:58 PM  Quick tips - Introduction to power of jQuery

4  4/13/2010 9:50:13 PM  Quick tips - Introduction to power of jQuery