<title>RECIPE TITLE</title>

<script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript">

From the above sample ASPX form, note the following:

► The jQuery library is included in the page header using <script> tags as follows:

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>

► The actual jQuery magic is applied in another script block in the page header:

<script type="text/javascript">

► The web form with the required ASPX markup is included in the page body as follows:

<form id="form1" runat="server">

<!—-INCLUDE ASPX MARKUP HERE-- > </form> </body>

form id="form1" runat="server"> <!—-INCLUDE ASPX MARKUP HERE-- >

For the purpose of this book, we have downloaded the uncompressed version of jQuery 1.4.1 on the local system. All recipes and code samples are based on this version of jQuery. The future releases of the library are expected to be compatible backward.

Getting started

Using Visual Studio 2010:

► Create a new ASP.NET website Chapterl in Visual Studio 2010 as shown below:

► Since jQuery is distributed with Visual Studio 2010, the library can be directly included and used on ASPX pages as displayed in the screen below:

Using Visual Studio 2008

► Create a new ASP.NET website Chapterl in Visual Studio 2008 as shown below:

http://code.jquery.com/jquery-l.4.l.js and save to a local folder."/>
► Download the jQuery library from http://code.jquery.com/jquery-l.4.l.js and save to a local folder.

► Download the Visual Studio 2008 intellisense hint file from http://code.jquery. com/jquery-1.4.1-vsdoc.js.

► Ensure that the naming prefix of the intellisense hint file matches that of the jQuery library as shown below:

To enable jQuery intellisense in Visual Studio 2008, ensure that you have upgraded VS2008 to Service Pack 1 and applied the hotfix KB958502

http://archive.msdn.microsoft.com/KB9585 02.

Usage of jQuery Library

Create a test form in the project and drag-and-drop the jQuery source file on the form. Visual Studio will automatically add the following code to the ASPX file:

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>

The page is now enabled for using jQuery. We can now include the required jQuery markup in the script block as follows:

<script type="text/javascript"> $(document).ready(function() {

All the jQuery markup on the page should be included in the $(document).ready() function. This function is executed as soon as the DOM is loaded and before the page contents are rendered.

Now, with this information, let's move on to the recipes where we will solve specific web development problems using jQuery. We have focused on the jQuery scripting required for solving the given problem. The ASP.NET code-behind logic is left to the reader to implement as required.

The recipes in this book have been tested with IE 8, Mozilla Firefox 3.6, and Chrome 9.0. The complete source code for all chapters is included with the book.

When using the provided source code, update the namespace in the Page directive of the ASPX files <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx. cs" Inherits="Recipe1" %> to your own local namespaces.

Creating default text for TextBoxes

In this recipe, let's see how to create a search box in ASP.NET with some default information text. The text is displayed only when the search box is out of focus.

Getting ready

1. Add a new web form Recipel.aspx to the current project.

2. Add a TextBox field with a Search button to the form as below:

<form id="form1" runat="server"> <p></p>

<div align="center">

<fieldset style="width:4 00px;height:8 0px;"> <p><asp:TextBox ID="TextBox1" width="200px" CssClass="defaultText" ToolTip="Enter your search keyword here" runat="server"></asp:TextBox>

<asp:Button ID="btnSubmit" Text="SEARCH" runat="server"

3. The CSS class defaultText attached to the TextBox is defined as below:

.defaultText font-style:italic; color:#CCCCCC;

4. Thus on loading, the page displays the search form as shown in the following screen:

We will now use jQuery to display the default text when the search box is out of focus.

1. In the document.ready() function, retrieve the TextBox control using its ClientID and save in a local variable:

var searchBox = $('#<%=TextBox1.ClientID%>') ;

2. On the focus event, check if it contains the default text:

searchBox.focus( function() {

The ToolTip property of the ASP.NET TextBox control is rendered as title at runtime. Thus, the ToolTip text Enter your search keyword here is retrieved using this.title.

3. If yes, then remove the defaultText css style:


4. Also clear the search field:


5. On the blur event, check if the TextBox is empty:

searchBox.blur( function() {

6. If yes, then attach the "defaultText" css style:


7. Add the default information text to the search field:


8. Call the blur event on page load so that the TextBox is initially out of focus:


Thus, the complete jQuery solution is as follows:

<script type="text/javascript">

$(document).ready(function() {

var searchBox = $('#<%=TextBox1.ClientID%>');


searchBox.removeClass("defaultText") searchBox.val("");

searchBox.blur( function() {

searchBox.addClass("defaultText") searchBox.val(this.title);


ClientID is a unique server control identifier generated by ASP.NET to avoid duplicate IDs when controls are repeated; say, for example, in a Repeater control. It is generated by concatenating the ID of the control with the UniquelD of its parent control. Underscore character (_) is used to separate each part of the generated ID.

Run the web form. Initially, the page is displayed with the default text. On focusing on the TextBox, the text disappears and the web user can key in the required search keywords. Note that the text style of the default text and the user input are different.

See also

Disallowing cut/copy/paste operations on a TextBox.

Auto focus on the first TextBox and tab on the Enter key

When keying in data in a lengthy form, at times web users prefer to tab to the next box by pressing the Enter key. In this recipe, we will see how we can achieve this tabbing effect.

Getting ready

1. Create a new web form Recipe2.aspx in the current project.

2. Add a few TextBox controls to create a simple data entry form to capture users' profile information as follows:

<form id="form1" runat="server"> <div align="center">

<fieldset style="width:400px;height:200px;"> <table cellpadding="3" cellspacing="3" border="0"> <tr><td>

<asp:Label ID="lblName" Text="Name: " runat="server"></ asp:Label></td>

<td><asp:TextBox ID="txtName" Width="200px" runat="server"></ asp:TextBox></td></tr>

<tr><td><asp:Label ID="lblAddress" Text="Address: " runat="server"></asp:Label></td>

<td><asp:TextBox ID="txtAddress" Width="2 00px" runat="server"></asp:TextBox></td></tr>

<tr><td><asp:Label ID="lblContact" Text="Contact Number: " runat="server"></asp:Label></td>

<td><asp:TextBox ID="txtContact" Width="2 00px" runat="server"></asp:TextBox></td></tr>

<tr><td><asp:Label ID="lblEmail" Text="Email: " runat="server"></asp:Label></td>

<td><asp:TextBox ID="txtEmail" Width="2 00px" runat="server"></ asp:TextBox></td></tr>

<tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT" runat="server" />

<asp:Button ID="btnReset" Text="RESET" runat="server" />


3. The page displays the form as shown in the following screen:

I '1 Chapter 1 - Recipe 2: Auto focus on the first textbox and tab on enter key ~ Mozilla Fir


File Edit View History Bookmarks Tools Help

0 - c


http://localhost/chapterl/recipe2.aspx '



Chapter 1 - Recipe 2: Auto focus on t...

0 0

Post a comment