ashish

Most of the applications have input functionality ,user can enter values in the input fields on the page.There may be input fields for different things like giving user the option to enter his birthplace, city ,country and lot of other options.If the user has to type values for all of these fields it can be tiring for the user.

To help the user to enter these values our application can provide suggestions as the user types in the input field.User can chose a value from the suggestions instead of manually typing all the values.

Below is an input field where user can enter the country.Instead of typing the entire country name,user can select the value from the suggestions.The suggestions are displayed automatically as the user starts typing in the textbox.

We can include such autosuggestion  functionality using the jQuery autocomplete widget.In this tutorial we will see how to add the autocomplete widget to our page.

We can use the autocomplete widget in our application by following the below steps.

1.Declare an input field and set its id.We are setting the id as country in the following field

Countries<input type="text" id="countries" />

2.Attach the autocomplete widget with the input element.
We can attach the widget with the input field by calling the .autocomplete() on the input element.We are attaching the country input element with the autocomplete widget

$(document).ready(function () {
$('#countries').autocomplete();
                 });

3.Pass an object to the autocomplete() having a property “source”.
Source is an array which contains the list of all the elements we want to display to the user as he types.We will define source in the next step.

$(document).ready(function () {
$('#countries').autocomplete({ source: countries });
                 });

4.Define the source.
Source is a javascript array.We can declare this array in javascript or we can return the source from the server.Usually if we have source containing lot of elements we return the source from the server.

 var countries=[
                 "United States",
                 "United Kingdom",
                 "Uzbekistan",
                 "Uruguay"
                           ]

Though we have defined the source in the javascript we can fetch the source from the server using ajax.To retrieve the  data from the server we can assign a function to the source property which makes an ajax call to the specified url

$('#countries').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCountries",
dataType: "json",
success: function (data) {
return data.Name;
//return the data fetched from the server
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//error occured
}
})
} });

Label and Value Whenever the user selects any value from the autosuggestion list ,the selected text is displayed in the input text field.But by including the Label and Value we can populate the Value in the textbox while Label value will be displayed to the end user.

minLength  By default the autocomplete will start making suggestions as soon as we type the first character in the input field.But we can change this by setting the minLength property.Suppose we set this property to 3 then the autocomplete will provide suggestion only when the third character is typed.This is useful if the source contains lots of records.

Follow on:

Most of the web applications contains more content then what can be displayed on a single page to the user.Also the application may have different groups or categories related to the different entities in the application.In an e-commerce site for example there can be categories for books,electronics ,clothes etc.If we are going to display all of this information on a single page then it can be quite confusing to the user.The better alternative is to segregate different category of items into different groups which can then be displayed together.

jQuery ui tabs widget provides an elegant way to implement such a scenario.Using the tabs widget we can divide the content into different tabs.When the user selects a particular tab the data in the corresponding tab is displayed.

We can use the tabs widget in our application by following the below steps.

1.Reference the required jQuery library and the jQuery plugin.

2.Create the root element which will contain all the tabs and the panels.We need to give it identifier as we will refer it while calling the .().

<div id="tabbedPanel">
</div>

3.Declare the list for the tabs we want to show.We need to declare this list inside our root element.

<div id="tabs">
<ul>

<li><a href="#id1">Text1</a></li>
<li><a href="#id2">Text2</a></li>
<li><a href="#id3">Text3</a></li>
</ul>

</div>

4. Declare  the panels which will contain the actual content.These should correspond with the tabs that we have declared in steps.So the contents in these panels will be displayed when we click the corresponding tab.

<div id="tabs">
<ul>
<li><a href="#id1">Text1</a></li>
<li><a href="#id2">Text2</a></li>
<li><a href="#id3">Text3</a></li>
</ul>

<div id="id1">
panel1 contents
</div>
<div id="id2">
panel2 contents
</div>
<div id="id3">
panel3 contents
</div>

</div>

5. Now finally we need to call the tabs() function on the root div which contains all the tabs and panels.

$(document).ready(function () {
$('#tabs').tabs();
});

If we refresh the page after making the above changes we will get the page as displayed below

We have given the names to panels and tabs for testing purpose ,in real world scenario we may use something more realistic such as the below tabs.

We can use the following markup to generate the above tabs.It’s important to see that the href id in the list refers to a div which we have declared inside the root div.In this example href=”#ComputerStudents” refers to a div which we have declared inside root div,we prefix # when referring to div.

<div id="tabbedPanel">
<ul>
<li><a href="#ComputerStudents">Computer Students</a></li>
<li><a href="#ElectronicsStudents">Electronics Students</a></li>
<li><a href="#MechanicalStudents">Mechanical Students</a></li>
</ul>
<div id="ComputerStudents">
ComputerStudents
</div>
<div id="ElectronicsStudents">
ElectronicsStudents
</div>
<div id="MechanicalStudents">
MechanicalStudents
</div>
</div>

So as we have seen it is easy to include jQuery ui tabs widget in our application to segregate the contents into different tabs.

Follow on:

In javascript we use the alert or confirm message box to display message to the end user.Though it is the commonly used way to show informational message to the end user it has the following shortcomings

• Message box may defer from browser to browser
• It is not easy to customize the fixed layout of the message box

Below the javascript alert box is displayed in chrome and Internet explorer.As you can see their layout is not consistent.

Javascript alert in Chrome

Javascript alert in IE

Also we can not change the layout of the inbuilt dialog boxes.An alert box will always contain a button with “OK” text and a message ,we can not add an extra button in an alert box if we require.The jquery dialog provides a convenient way  to display a consistent message box and and we can control its layout .

To add the jquery dialog to the page we need to follow the below steps

Add the jQuery library and jQueryUI plugin.We can use the google cdn to add these

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="Stylesheet" type="text/css" />

 

Add a div which contains the content we want to display in the dialog

<div id="dialogBox" title="Dialog Box!">
Hello!
</div>

Attach the dialog to the source div

Once we have defined the div we can call the dialog() widget on the div.Normally we need to call the dialog() in some event handler.

$('#dialogBox').dialog({   }) ;

We will get the below dialog if we follow the above steps

We have created a dialog which just displays a message to the user.Dialog in jQuery provides many customization options.Some of the options available are

buttons   To add buttons to the dialog.The buttons property takes a javascript object as its value.The javascipt object contains the button text and the function that we want to associate with a button.We can add a button to the dialog box as

buttons: {
"Confirm": function () {
//confirm button logic
}

modal To specify that the dialog is modal.Modal dialog means that the user must select any option in the dialog.The modal dialog get the focus and the background is disabled until user selects some value from the dialog.

The background is disabled in Modal dialog

title   To specify the title of the dialog.If we don’t specify this value then the title value present in the source ,such as div ,will be used.Though we have not spcified any value for the above dialog even then the title is displayed in the above dialog as the title is present in the source div.

<div id="dialogBox" title="Dialog Box!">
Hello!
</div>

If not specified by the dialog widget the title of the source is used

closeOnEscape  This specifies that if the dialog has the focus and escape key is pressed then the dialog closes.

show  Specifies how to animate the opening of the dialog.If set to false then no animation will be used.If we specify the number then the dialog will display within the specified duration in milliseconds.Default value is null.

hide  Specifies how to animate the close of the dialog.If set to false then no animation will be used.If we specify the number then the dialog will close within the specified duration in milliseconds.Default value is null.

jquery dialog with hide value set to 1000.

Close  This method closes the dialog.If we need to close the dialog using the script then we can call the close() method.

isOpen This method returns a boolean value which indicates whether the dialog associated with the element passed as an argument is currently open.To check if the dialog associated with a div with id “message” is open we can use

$("#message").dialog( "isOpen" );

 

Follow on:

jQuery has many different types of widgets which makes it easy to add different types of functionalists in our applications.One commonly used widget is Datepicker. Most of the applications provides user the option to select the dates.So instead of allowing the user to select date in any arbitrary format which is also inconvenient for the user, we can use the datepicker widget which makes it easier to select the date from a calendar.

We can easily add and customize the Datepicker widget.To add the datepicker in our application we need to add the required jQuery libraries and the css.We need the following jQuery libraries to use the datepicker widget

• jQuery core library
• jQuery ui library
• jQuery ui css

We can easily add these using the googleapis.Below we have included the required libraries and css

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

Once we have added the above libraries we add the input element we want to associate the datepicker with .Finally we call the datepicker() on the input element. Below we are adding the widget to a birthdate input field.

We add the input field with id birthDate

Date<input type="text" id="birthDate" />

We can now associate the datepicker widget with the field by using the below jquery snippet.

$(function () {
$("#birthDate").datepicker();
}
)

If we now request our html page we will get a textbox on the page.On clicking or focusing on the text field a calendar is displayed from which the user can select the date.

Once the user select the date from the calendar ,the calendar popup is dismissed and the selected date is populated in the textbox.

Above we have added the datepicker widget with just the default functionality.Datepicker gives us lot of options for customization.

Some of the options for customizing the datepicker are

showOn  This option is used to specify how we want to trigger popup calendar.The values we can specify for  this can be

• focus  Displays the calendar when the input field receives focus.
• button  Displays  the calendar when the button is clicked.This option also adds a button adjacent to the input control.
• both  Displays  the calendar on both the click of the button and when the input field receives the focus.

In the following code we have specified the value of both so that the calendar will be displayed both on click of the button and when the input field receives focus.Also we have set the text for the button using the buttonText option.

$(function () {
$("#date").datepicker({
numberOfMonths : 3,
showOn: "both",
buttonText:"select",
appendText: "(yyyy-mm-dd)"
});        }
)

numberOfMonths  This option is used to specify how many months are displayed when the calendar is displayed .By default only a single month is displayed ,by specifying this value we can control how many months are displayed at a time.

 

changeMonth and changeYear  By default the datepicker displays a calendar with previous and next arrows only.If we want to select years and months which are in the distant past or future using previous and next arrows is not very easy to select such years and months.We can set changeMonth and changeYear options to true to display dropdowns for years and months.By using the drop downs for years and months user can easily select any year and month.Below we have set the changeMonth and changeYear as true.

$("#date").datepicker({
changeYear: true,
changeMonth: true,
});

On executing the above script following calendar is displayed by the datepicker when user focuses on the input field.

 

dateFormat  We can display the dates in the input field when the user selects the date from the calendar in different formats using the dateFormat option.Different characters represent different date format options. Some of the date format options are

[table id=4 /]

If we want to display the selected date in the format 24-December-14 we can use the below date format

$(function () {
$("#date").datepicker({
dateFormat : 'd-MM-y'
});
}
)

Displaying as Inline

Instead of displaying the datepicker on clicking or focusing on an input field we can embed the datepicker in the page so that it is visible all the time.To create an inline datepicker we need to call the datepicker() on the div instead of an input field.

$(function() {
$( "#reservationDate" ).datepicker();
});

Reservation Date: <div id="reservationDate"></div>

Follow on: