jQuery

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:

jQuery includes several methods for implementing the ajax functionality in our applications.In the last post we looked at the jQuery get() and post() methods.These methods ,as per their names, makes GET and POST requests to the server.Behind the scenes these methods use the jQuery ajax() method.So it helps to understand the ajax() method which provides  lot of different options for making asynchronous calls to the server.In this article we will also look into a jquery ajax method example in mvc.

The basic syntax of the ajax() method is

$.ajax({name : value ,name : value .....})

We can pass different key value pairs to the method in a  javascript object.These name value pairs configures the asynchronous requests to the server and each key value represents some aspect of the  asynchronous request.Some of the important values we can pass into the method are

url  This key specifies the url to which we are making the request.So this is one of the most important key we need to pass to the method.Its  important to realize that if we don’t specify this value then the request is made to the current page.In case of MVC the request is made to the action method for the view if we don’t specify this value.

success  This key specifies the callback function which will be called if the request completes successfully.This method gets as parameters the data returned from the request,status of the request and also the XMLHttpRequest object .

error     This key specifies the callback function which will be called if the request fails .This method gets the data returned from the error,status and the jqXHR object as parameters.

Below we are making a simple request to an action method using just the above key values.

$("#btnSubmit").click(function () {
$.ajax({
url:"/Employees/EmployeeDetails",
error: function (xhr, status, error) {
alert(error);
},
success: function (data,status) {
alert(data);
},
});

type  Specifies the type of request to use for the ajax call.We can use HTTP methods POST, GET, PUT.Default value is GET which is used if we don’t specify the type value.

It’s important to understand that by default the ajax() method makes the GET request to the specified url. So in  this case the request will succeed if we have a GET action method. If we need to make the POST request to the server we need to set the type value .

So if our action method is defined as below and we don’t specify the type value in the ajax method we will get a “Not Found” error response from the server.

[HttpPost]
public ActionResult EmployeeDetails()
{
return View();
}

To call the above action method we need to add the key for type and set its value to “POST”.

type :"POST"

data If we have to pass the data to the action method using the ajax() method then we need to add the value for data key.So to pass the employee object as an action method parameter we can create a json object and set it as the value of the data key.

var Employee = { "name": "Ashish", "address": "AddrXYZ", "salary": "SalXYZ", "id": "idXYZ" }

$.ajax({
data: Employee,
contentType: "application/json; charset=utf-8",
url:"/Home/EmployeeDetails",
error: function (xhr, status, error) {
alert(error);
},
success: function (data,status) {
},
success: function (data) {
},
});

We need to have a model object with the same properties as the json object defined above.

public class Employee
{
public string name { get; set; }
public int id { get; set; }
public string salary { get; set; }
public string address { get; set; }
}

Now we can define our action method as

[HttpGet]
public ActionResult EmployeeDetails(Employee emp)
{
return View(emp);
}

When the request is sent to the action method the values that we have set for the javascript object in the ajax() method data key are  are used to populate the Employee object of the action method parameter .

 

dataType  This specifies the type of the data that our $.ajax() method is expecting back from the server.We are not required to specify this value most of the time as MIME type of the response is used by jquery to identify this value.

These were some of the commonly used values that we can pass to the $.ajax() method.

$.ajaxSetup()

There is a $.ajaxSetup() method in jquery which can be used to provide default values for the $.ajax() keys.

If we set the values for the $.ajax() keys in the $.ajaxSetup() ,then the ajax calls we make using jquery will use the $.ajaxSetup() settings so we don’t need specify them when making the call.So if we set the url using the below then we don’t need to specify the url in $.ajax()

$.ajaxSetup({
  url: "HomeIndex"
});

So if we now call the the $.ajax() method without any parameters it will send the ajax request to the url we have set above.

Follow on:

AJAX or  Asynchronous Javascript and XML  is used for communication between the client and the server.Using AJAX the parts of a web page can be updated without a full page refresh.This not only results in less data transfer but also results in a better experience for the end user.

AJAX is very common on the web pages today.As users are constantly demanding better experience from the web applications.So by implementing AJAX in our MVC views we can provide experience similar to a desktop application.

jQuery provides different methods for using ajax.We can use the following Jquery methods  for data exchange  between the client and the server

• get()      Fetches the data from the server using HTTP Get method.
• post()    Fetches the data from the server using HTTP Post method.
• ajax()   Fetches the data from the server using HTTP Get method or HTTP Post method.
• load()   Fetches the data from the server and displays in an element.

As you can see above get() and post() method corresponds to GET and POST HTTP requests.While ajax() method can be used for either GET or POST HTTP request.

get() and post() methods are called the shorthand methods since they actually use the Jquery ajax() method behind the scenes.We will see how to use the ajax() method in a later post.

By using these methods we can easily make the asynchronous calls to our action methods ,pass and fetch the data from action methods.

jQuery get and post ajax methods in MVC

We can use jQuery get and post ajax methods in MVC application to call action methods.It is a convenient way to implement ajax functionality in MVC applications.

Calling action method using get()

To use these methods we need to include the jquery library in our view.It’s better to include it in the shared _Layout view if we are going to use it in many different views. We can include the library using the cdn as below

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

We define the action method  which we will be calling using the jquery get method.We are returning a string from our action method which we will display in our view.

[HttpGet]
public string GetMessage()
{
return "Hello ";

}

We can call the GetMessage action method in the Home controller as

$(document).ready(function () {
           $("#btnSubmit").click(function () {
           var url = "Home/GetMessage";
             $.get(url,  function (data) {
              $("#result").html(data);
                                         });

                              });

                        });

The first parameter in the get() method is the url of the action method ,the second is the callback function which is called when the data is returned from the server.

We will be calling the action method on the click of a button and will display the results in a span element.

Next we add the span and the button.

On the click of the button the action method is called and returns the data which we display in the span.

In the above get() method we are not passing any data to the action method.We can pass data to the action method as:-

$.get(url, { name: "ashish" }, function (data) {
              $("#result").html(data);
                                         });

The important thing is that the name of the property in the javascript object ,passed to the get method, should match the name of the model properties.This is required to  populate the action method parameter object with corresponding values from the javascript object .The callback method receives a parameter which contains the returned value.

We get the following data when we call the action method using the $.get() method.The “Hello” string is returned by our action method which we display in a span.

Calling action method using post()

We can call the action method using the jquery post method on the button click as

$("#btnSubmit").click(function () {
                var url = "Home/GetMessage";
                $.post(url, function (data) {
                    $("#result").html(data);
                });

Similar to the get() method we are passing the callback function as an argument to the post method which will get the returned value in a parameter.

As now we are calling the action method using the jquery post() method we need to remove the [HttpGet] attribute from the action method

public string GetMessage()
        {
            return "Hello ";
        }

If we need to pass the complex data to the form we can specify it in a JSON object variable and pass it as an argument to the post() method

var employeeModel = { "name": "Ashish", "address": "AddrXYZ", "salary": "SalXYZ", "id": "idXYZ" }
 $.post("@Url.Action("EmployeeDetails", "Home")", employeeModel, function (data) {  
                $("#result").html(data);
            });

The properties which we define the employeeModel object are same as the properties in the model object.

We have defined our form as

@using (Html.BeginForm("EmployeeDetails", "Home", FormMethod.Post, new { id = "frm" }))
{
     @Html.DisplayFor(x => x.id)
     @Html.DisplayFor(x => x.name)
     @Html.DisplayFor(x => x.address)
     @Html.DisplayFor(x => x.salary)
    
}

When we click the submit button the values which we have defined for the employeeModel object are passed to the action method parameter.

 

Though we have assigned the static values to the JSON object but we can assign the form element values to the object using the $(“#id”).val() method so that the actual values are passed to the action method.

To return the Json object from the action method we can use the Json helper method.In the below method we are returning the status message in a json object.

[HttpPost]
public ActionResult EmployeeDetails(Employee details)
{
return Json(new {message="Updated!" });
}

We can display the returned json object’s value in the callback function as

function (data) {
$("#result").html(data.message);
});

 

The post() and get() methods are quite similar.But the difference is that while the get() method makes the request using HTTP GET the post method uses HTTP POST.So get() method should be used when we need to fetch the data from the action method while post() method should be used when we need to update the data.

Follow on: