September 2008 - Posts
Snail on with my learning and writing about the very very basic lessons on JQuery. Again, thanks to all of you for the kicking (ouch! yet the more the merrier), dzon-ing and reddit-ing. I am still glowing in and baffled by the attention (as little as it is. Big for me, since I am no Scott Gu) ...
JQuery, the very very basics - Lesson 2
In "modern" (DOM) web programming, web pages are made up of a hierarchy of elements. Manipulation of elements goes far beyond styling and positioning, it involves almost everything, adding / deleting content, appending and removing children elements, attaching itself to a new parent, cloning ... Everything is possible. The question is : How?
Content manipulation: html() and text()
Pretty much all JQuery commands go both ways: get and set. To access a property only, call the command without parameter; to modify, call the command with a parameter.
html() returns the innerHTML property of a element;
html(content) set the element's innerHTML to the content passed
text() returns the text content (stripped of any html markups) ;
text(content) changes the text content of the calling elements.
So say for example, we have a little html code as the following:
$('table#table1').html(); // returns everything inside the table (id=table1), including the html tags
$('table#table1').text(); // however returns only the actual content (in one big unsepearable string): test1item1
Form element values: val()
To get or set values of form elements, we use val() command (in its two-way street fashion: val() for get and val(content) for set).
A couple of especially neat things about val() command with form element.
a) Remember how we used to painstakingly enumerate through a group of radios until we found the chosen one?
Now with JQuery (with selectors and val()), we may just say:
var selected = $('input[name=selectMe]:checked').val();
b) Remember that JQuery command can always multitask, besides that it can chain up more number of commands than a chain smoker do with cigarettes?
Here is the deal with the val(values) command. It can be used to set up values for each element in selected set in one shot.
Consider the following code:
$('input').val(['red','blue','orange']);
It will check all checkboxes or radio boxes whose value matches any of the values in the array (red, blue, orange) passed to command.
Appending and inserting
JQuery is skilled in moving things around. And it uses exactly the same English words we do (except in a very very economic fashion).
append(something): stick the "something" passed to the end of a matched set;
appendTo(target): stick everything in the selected set to the end of the target;
prepend(something): stick the "something" passed to the beginning of a matched set;
prependTo(target): stick everything in the selected set to the beginning of the target;
before(something): insert the "something" before each element of the matched set
insertBefore(target): insert the whole matched set before the targeted set of elements
after(something) : insert the "something" after each element of the matched set
insertAfter(target) : insert the whole matched set after the targeted set of elements
Wrapping and removing
Like candies that need sparkling wrapping paper, sometimes we want to wrap our element(s) in some sort of wrappers too. For this, we can use wrap(wrapper) command.
$('p.note').wrap("<div class='note'>This is our notes section</div>");
Flipping the coin, we may want to remove things from a wrapper too.
remove(): removes all elements in a selected set. For example:
$('div.note').remove();
Cloning with clone()
We do cloning with clone(), then move the clone to elsewhere, chaining up with commands such as appendTo, insertBefore, before, after, etc.
$('img#cloneme').clone().appendTo('div#gallary');
Read more
Continue on with the series of lessons I learned about some of the very basics of JQuery. Thanks to all of you who has generously kicked, dzoned, redditted my first of N posts on this topic:
JQuery, the very very basics - Lesson 1
So it is nice to be able to use a combination of JQuery selectors to grab an array of elements, however, it would be better if we know how to inspect them one by one and operate on them.
size() and each(iterator)
To determine the size of the set we just selected, we use the size() command.
For example, to list all the ids of the <p> elements we just selected, we can use a for ... loop and the size() command:
To cut the chase even more, we can use the each() command, which takes a literal function as parameter to deal with each element in the set. The element can be accessed using the this keyword. So rewrite the above code:
Get and set attributes' values
attr(name) and attr(name, value)
Well, you probably have guessed it. The first attr() command lets you access the value of an attibute designated by the name, the second attr() command assign the named attribute with the value specified in the second parameter.
For example, I have a dummy <p> element as such:
<p id="p1" title="test">Test, test</p>
$('p#p1').attr('title') returns the value of the attribute title ('test'),
$('p#p1').attr('title', 'more than a test') change the title's value to "more than a test".
Css Style: Dress up, dress down 
addClass(names), removeClass(names) and toggleClass(name)
addClass dresses up all of the elements in a selected set with one css class or multiple css classes; conversely, removeClass strips off the elements one or more css classes specified by the name paramter, as in:
$('p.notes').addClass('notes', 'highlight');
$('p.notes').removeClass('highlight');
Do not we all love to toggle, add and remove, switch and off? Well, toggleClass command does just this, add the specified css class to element(s) if it is not there, remove it if it is.
$('p.notes').toggleClass('highlight');
css(name, value)
What if we want to change css style of elements without using any css class names? There, css command affords us to do so.
$('p.note').css('background-color', 'yellow'); changes the background color of all <p> elements whose class name is note.
There are more css related commands such as width(value), height(value) to allow us to directly change elements' apparence, for example:
$('p.note').width(500).height(100); changes the width then height of all <p> elements whose class name is note.
Read more
JQuery is the star among the growing list of JavaScript libraries. A few of its characteristics are light-weight, cross-browser compatibility and simplicity. A task that would take 10 lines of code with traditional JavaScript can be accomplished with JQuery in just 1 line of code. For example, if you want to dress up a table with an ID mytable with alternative color for every other row, in query, you can simple do this in JQuery. 
Belatedly and slowly, I warm up to JQuery, surprised by its simplicity and sensibilities. Yes, unlike ASP .net ajax libraries, where it feels like that I have to relearn everything and where I was hopelessly overwhelmed by new terminologies, JQuery seems to work along the logic that we have trained our brain with traditional JavaScript and css.
I write to record the series of very basic lessons I learned about JQuery (my study source is the very readable book JQuery in Action).
The magic dollar sign ($) and a chain of operations
In JQuery, the most powerful character / symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations. An example
$("div.test").add("p.quote").html("a little test").fadeOut();
Think it as a long sentence with punctuations. Indeed it is a chain of instructions to tell the browser to do the following:
1) Get a div with class name = test
2) Insert a paragraph with class name = quote
3) Add a little text to the paragraph
4) Operate on the DIV using a predefined method called fadeOut
So there it is, the first two basics: $() and chainable
Selectors:
1. css selectors
We dress up web pages with css stylesheets, css stylesheets dress up DOM elements by DOM hieriachies:
body, table, p, input; or by element ID, since all ids are unique; or class names.
JQuery uses the same set of css retrieval methods to single out one element or a group of elements, and normally we use a combination of them to cut the chase. For example:
$("p.note") returns all <p> elements whose class name = note
$("p#note") returns the <p> element whose id = note
$("p") returns all p elements
2. child, container, attributes selectors
To select a child or children, we use the right angle bracket (>), as in
$("p > a"), which returns all of the href link with <p> element
To select element(s) with certain attributes, we use [], as in
input[type=text], returns all text input elements whose type is text
To select a container of some other elements, we use has keyword, for example:
$("p:has(a)"), returns <p>
3. Position based selectors
JQuery allows us to select element by their relative order, as in:
$("p:first") returns the first <p> element
the predefined positions are
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
All of them are self explanatory
4. Custom Selectors
The above selector seems to have provided everything we need. However, there is more that JQuery can offer. It allows us to do custom selections using the following keyword:
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible
Again, nothing fancy, plain English, right?
I thought Bill Gates was out saving the world, now that he has officially taken the full-time job as the chairman of Melinda and Gates Foundation and that he is now in full swing promoting creative capitalism, something about advancing common social good while also making profits.
Turned out, Bill Gates can never quit from Microsoft. Now he i
s starring side by side with Jerry Seinfield prompting, what else? Microsoft windows. The ads are so subtle, so nothing, actually it is not clear what the two men were trying to do other than for being wierdly funny.
In the first ads, Gates twisted his shoes and wriggled his butt; in the second, Gates made dead-pan complaints about food and played powered-out robots. I think he is quite good as an actor, mild-mannered, taciturn.
Many people are puzzled or even angered by the lack of point of the ads. On the other hand, many people raved and are still raving about the Mac Vs. Microsoft ad, where a young lad (good looking, lean, supposedly cool. To me he looked like a Chinese young man in the fifties) called Mac coolly sizes up a happy, clumsy, untidy middle-aged man called PC. The ad ends with a line "Switch to Mac" (or something like that.)
I personally do not find the ads that good. Cannot find any reason that Mac has such a sense of superiority. I cannot stand a Mac computer, with which even word processing becomes a challenge.
When ADC was first released, it had an pretty impressive set of features, sorting, paging, animation, dragging and dropping, client-side databinding.
As time went by, ADC team has added bits and pieces of updates.
1. Enable referencing to an ADC control using its client-name. Sonu uploaded the changes on July 18, 2008. Because it is no fun to reference your control using $find("gridview1"), now instead, you can directly bind a datasource to ADC by its ID, for example:
Gridview1.DataSource = myDataSource.
2. Add onMouseOver, onMouseOut as part of the ADC controls' events, so instead of manully attaching the mouseOver events to a GridView's RowCreatedEvent, coding like the following:
//change css style of a gridview row when mouse over/mouse out
function onRowCreated(sender, e)
{
if (e.get_row().get_isDataRowType())
{
var row = e.get_row();
var tr = row.get_container();
tr.onmouseover = function(){ this.className = 'rowMouseOver' };
tr.onmouseout = function(){ this.className = 'rowMouseOut' };
}
}
We do the following:
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" RowMouseOverEvent="onRowMouseOver"
RowMouseOutEvent="onRowMouseOut">
Of course, you have to define you own onRowMouseOver and onRowMouseOut functions.
function onRowMouseOver(sender, e)
{
}
...
Putting it all together, an example of GridView with MouseOver / MouseOut events:
See it how it runs:
please read my other posts about ADC:
When browser usage is tipping toward to FireFox, Microsoft released IE 8 last week, yesterday Google launched Chrome, formally stepped into the browser battlefield.
I like my IE 7 enough I did not bother with IE 8. However, I was curious to see what Chrome can do and how. I went to its download page. Immediately I was hit by an error and was asked whether to debug. I chose yes, and the following is the debugging screen:
Probably it is just me. Searching around no one complained.
.....................................................................................
What do people say about IE, FireFox and Chrome
Chrome: fast and simple. However, it lacks some key features, such as bookmarking.
FireFox: fast, secure and snappy interface. It started tab browsing, which was adopted by IE 7. The best adds-on to me is the FireBug, which provides a rich set of debugging features.
IE: IE suffers the same fate as other products in the Microsoft family. Many people has a visceral dislike about anything Microsoft. I like it and am happy to be one of the 70% of people who is using Internet Explorer.
What holds in the future?
Rome was not built in one day. Even as FireFox has gradually won over users at the expense of IE, it still has no more than 30% of the market share, Chrome likely has a long way to go.
