[tweetmeme]While going through the jQuery API documention, I realised that I have not tried my hands at many of its wonderful functions. So I thought of doing something creative with clone() and animate() functions. Here are the list of things I am going to do…

Capture the user’s keypress event as they type and get the key value

Create a clone of a hidden DIV element and change its text to the keypress value

Place the new DIV elements one after the other and provide some random background color for each DIV element

[tweetmeme]Here is a technique I normally use to show/hide a content in a div tag. This is quite an useful UI technique in situations where you have to show a Master-Child data, where the child data will be hidden initially and will be shown on demand on click of a image or button.

Lets say I have a web page which will have the following HTML output…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQ Show Hide</title>
</head>
<body>
<a href="javascript://" title="#content-1" class="toggle">
<img src="images/plus.png" border="0" />
Another URL Shortener and it is from Google </a>
<div id="content-1" class="content">
Goo.gl is Google’s version of URL Shortening service. Unlike its counterpart tinyurl.com
or bit.ly, Goo.gl is not a stand alone tool to generate short URLs. For now, the
only way you can shorten a URL using Goo.gl is by using the Google Toolbar or if
you have a Feedburner account, integrate your Feedburner feeds with your Twitter
account.
</div>
</body>
</html>

Here I have a clickable Title Another URL Shortener and it is from Google and an Image followed by a content inside a div tag. To provide a better user experience we’ll set ourselves the following tasks…

The content inside the DIV tag should be hidden when the page loads

On clicking the Title or the Image, the content should slide down. On clicking again, it should toggle back to hidden state.

The Image should change from plus to minus and vice-versa during the toggle.

[tweetmeme style=”compact”] Using AJAX has become one of the de facto practices in many web based RIAs. The use of jQuery is on the rise in many web applications, especially the ones built using ASP.NET MVC. Making AJAX calls using jQuery is quick and easy. A typical web request can have an expected response or an exception. It is therefore important to catch exceptions when we make any AJAX calls so that we can show some message which makes sense to the user.

Lets begin with our Controller. Create the following method to throw JSON version of the exception.

Here we are making a call to the DivideByZero ActionMethod. Obviously the exception will be thrown,which will be caught in the error block. The responseText is a string of serialized data, which will not be useful unless we parse it to JSON. We can use the native JSON parser available in the latest browser. But, this as I found out is not helpful in IE 7 or lower. Fortunately, there is a useful library at JSON.org that can parse the responseText to JSON.

Let me know if there are better ways of handling exceptions in jQuery.

The big question for me though is why did YouTube come up with its own Shorter URLs when they could have used Goo.gl? Is it some kind of marketing technique or is it YouTube’s way of saying we have it too!