jQuery

Today more and more JavaScript code is being used on the front end as a result of many JavaScript frameworks available today.Also we need to use JavaScript in our code to make our web application provide better end user experience.

If we don’t use any JavaScript Bundling then if our application uses 3 different JavaScript files then we include those files in our application as:

<script type="text/javascript" scr="file1.js">
<script type="text/javascript" scr="file2.js"/>
<script type="text/javascript" scr="file3.js"/>

Now if the JavaScript in file3 is dependent on the code in file2 then we strictly need to follow the above pattern when referencing JavaScript files.So we can not include file3 before file2.If we do that then our JavaScript code will break and will not execute.

So we need to follow a strict order when referring JavaScript files in our HTML page.For small number of files this may not be an issue but with large number of files it can difficult to maintain order of JavaScript files.

JavaScript Bundling handles such types of dependency issues. JavaScript bundler put all the JavaScript code which our application uses as well as all the dependent code in a single JavaScript file.

If we are referencing many JavaScript files in our html page then it will cause multiple http requests.But as the JavaScript bundlers dumps all the JavaScript code in a single file so it reduces the number of http requests.

Some of the common JavaScript bundlers are:
Browserify
jspm
Webpack

We can run webpack with the following command
npm run webpack

this creates a file bundle.js containing the JavaScript code.

Follow on:

Tooltip widget is used to add tooltip using jQuery.Adding a Tooltip in jQuery is quite easy and there are options to customize it.

In HTML to display extra information about an element such as textbox ,title attribute is used.This value of the title attribute is displayed as a tooltip.Tooltip is a small box displayed when the mouse hover overs an element.

jQuery tooltip widget provides an alternative to the native tooltips in html.This is part of the jQuery UI library.It allows for customizing the tooltip unlike the native tooltip which can not be customized.

Adding tooltip to an element

To add the tooltip to an html element just call the tooltip() method.To attach a tooltip to an html element follow the below steps

1.Include the following scripts and css in the head element

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

2. Declare the element to which you want to add the tooltip in the body.Below we have decalred a input element of type text.We have set its title attribute as “Title Text”.

<input type="text" id="tooltip1" title="Title Text"/>

3. Call the tooltip method on the HTML element.

<script>
$(function () {
$("#tooltip1").tooltip();
});
</script>

Above will display the following tooltip when mouse is hovered over the text element:

4. Set the options object to customize the tooltip.

The tooltip() method can be passed a javascript object to customize the tooltip.

$("#tooltip1").tooltip({ property: "value" });

Different properties can be passed to this method.Some of the useful properties are:

content This specifies the content of the tooltip.

$("#elementId").tooltip({ content: "This is custom tooltip implemented using jQuery UI library" });

disabled   Used to disable the tooltip.

$("#elementId").tooltip(disabled: true);

hide   Used for animating the hiding of tooltip.This can have the following values

• Boolean value ,true or false.If set to true the default animation settings are used.
• Number Specifies duration in which the tooltip fades.
• String  Specifies the inbuilt animation to use.
• Object Multiple animation properties can be provided.

Follow on:

Accordion is a jQuery widget that is used for better organizing the content in a page.Using Accordion we can place different content in different regions.Also we can make the different regions expandable and collapsible and also define properties for those regions.Regions are similar to tabs.

Following figure illustrates accordion in a web page.It consists of two sections “Top Section” and “Bottom Section”.The first section is expanded.

To implement accordion widget in a web page follow the below steps:

1.To make an HTML element as accordion we call the accordion() method on the HTML element.
Here we define a div and set its id as “main”.We will use this id to refer to this element in jquery

<div id="main">
</div>

2. Declare the nested div elements in which we want to include the contents of our web page.

<div id="main">

<h3>Top Section</h3>
<div>
<p>
Hello...This is content for Top Section
</p>
</div>

<h3>Bottom Section </h3>
<div>
<p>
Hello...This is content for Bottom Section
</p>
</div>

</div>

We have declared the <h3> elements in line number 3 and 11 above.These are used to set the section headers.

3.To make this div as accordion we call the accordion() method on the div element as:
$(“#main”).accordion();

4. To control the behavior of the menu or content ,accordion() method accepts a javascript options object .Options object consists of name value pairs.

$("#main").accordion({"property":"value"});

Some of the useful option values are:

active  Boolean value that indicates which panel is expanded by default.So if this value is set to 1 then second panel will be open by default.The first panel’s index is 0.

$( "#main" ).accordion({active: 1 });

To collapse all the panels set this value to false.

$( "#main" ).accordion({active: false });

collapsible  Boolean value which indicates if all the panels can be collapsed.If this value is set to false then at least one panel will be expanded at all the times.

disabled   Boolean value which indicates if the panel is disabled or not.

$( "#main" ).accordion({disabled: false });

heightStyle  Used to set the heights of the accordion and the panels.Possible values are:

auto: The height of the tallest panel is used as the height of all the panels.

fill:  All the available height is used by the panel

content: This is useful property if we want to set the height of the panel to show the content but not more than that.

 

 

Follow on:

A common requirement when working with item collection controls such as list box is validation.The user should only be able to submit the form when he has selected some values in the listbox.

We can easily implement this scenario on the client side using javascript and jQuery.For example if we define the select element as:

<select id="products" multiple >
<option value="1" selected>Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
</select>

The above listbox is rendered as:

Client side validation using javascript

To allow the user to submit the form only when some value is selected in the listbox we can implement a javascript validation function.The function will validate if any item is selected in the listbox.If no item is selected then it will not allow the user to submit the form

<select id="products" multiple >
<option value="1" selected>Item 0</option>
<option value="2">Item 1</option>
<option value="3">Item 2</option>
<option value="4">Item 3</option>
<option value="5">Item 4</option>
</select>

<input id="submit" type="submit" value="submit" onclick="return Validate();" />

The javascript function is defined as

function Validate()
{
var ddl = document.getElementById("products");

if (ddl.selectedIndex==-1)
return false;
else
return true;
}

Client side validation using jQuery

We can write the above validation function using jQuery as:

function Validate()
{
var noOfSelectedItems=$('#products :selected').length;
if (noOfSelectedItems==0)
return false;
else
return true;
}

Instead of preventing the postback we can also completely disable the submit button if no items are selected in the listbox

function Validate()
{
var ddl = document.getElementById("products");
var noOfSelectedItems=$('#products :selected').length;
if (noOfSelectedItems == 0) {
$("#submit").prop("disabled", true);
}
else {
$("#submit").removeAttr('disabled');
}

}

We can call the Validate() function whenever an item in the listbox is selected:

<select id="products" multiple onchange="Validate()">
<option value="1" selected>Item 0</option>
<option value="2">Item 1</option>
<option value="3">Item 2</option>
<option value="4">Item 3</option>
<option value="5">Item 4</option>
</select>

Follow on:

When creating web applications one of the most important things to consider is the speed of the website.If the web page is taking too long  to load then it can prevent most of the people from efficiently using the website.

When developing traditional web applications ,web server returned the entire HTML for the page which needs to be just rendered by the browser.This could have impact on the page load time since entire page needs to be refreshed even if only a small part of the page is actually updated.

To improve page load time and make the web application fast ajax is the commonly used technology.Using Ajax page can request just the HTML required to update the part of the page instead of the HTML of the entire page.On the web server we can use web services to send the response to the ajax requests.WebAPIs are commonly used to create HTTP services.

WebAPI is the prefered way of creating REST services in .NET.Here we will be creating WebAPI service which we will consume using ajax requests.

WebAPI services for CRUD operations

WebAPI services uses many of the same concepts as the MVC applications.Similar to MVC controller WebAPI controllers derive from a base controller class.But unlike MVC controllers which derive from the Controller base class ,WebAPI services derive from ApiController base class.

In the following example we have created a WebAPI service deriving from the ApiController base class

public class ValuesController : ApiController
{
List<Employee> EmployeeList;
public ValuesController()
{
if(HttpContext.Current.Session["EmployeeList"]==null)
{
EmployeeList = new List<Employee> {
new Employee{Name="Ashish",Id=1,Age=25},
new Employee{Name="Ajay",Id=2,Age=28},
new Employee{Name="Amit",Id=3,Age=32},
new Employee{Name="Priya",Id=4,Age=35}
};
HttpContext.Current.Session["EmployeeList"] = EmployeeList;
}
else
{
EmployeeList = (List<Employee>)HttpContext.Current.Session["EmployeeList"];
}

}
// GET api/values
public IEnumerable<Employee> Get()
{
return EmployeeList;
}

// GET api/values/5
public Employee Get(int id)
{
Employee e = EmployeeList.Where(x => x.Id == id).FirstOrDefault();
return e;
}

// POST api/values
public void Post([FromBody]string employee)
{
}

// PUT api/values/5
public void Put(int id, [FromBody]Employee employee)
{
Employee e = EmployeeList.Where(x => x.Id == id).FirstOrDefault();
int index=EmployeeList.IndexOf(e);
EmployeeList.Remove(e);
EmployeeList.Insert(index, employee);

HttpContext.Current.Session["EmployeeList"] = EmployeeList;
}

// DELETE api/values/5
public void Delete(int id)
{
Employee e = EmployeeList.Where(x => x.Id == id).FirstOrDefault();
EmployeeList.Remove(e);
HttpContext.Current.Session["EmployeeList"] = EmployeeList;

}
}

The above controller consists of following methods:

• Get
• Post
• Put
• Delete

Above methods correspond to the different HTTP verbs.For example if a request is made using the Get verb then Get controller method will be invoked.So method names have special meanings in WebAPI.

Client side jQuery methods for calling the WebAPI

Javascript or client side methods are required to call the WebAPI service we have created above.We will declare different methods which will call the above methods.

BindAll  This method will fetch the data from the service using the Get HTTP verb. This method is called when the web page loads.

If the WebAPI successfully returns the data then it calls the Bind() and the BindMethods().

var BindAll = function () {
$.ajax({
url: "/api/values",
type: "GET",
success: function (data) {
alert(data);
for (var iCount = 0; iCount < data.length; iCount++) {
var id = "btnDelete" + iCount;
Bind(iCount, data);
BindMethods(iCount);
}
},
error: function (xhr, status, error) {
alert(error);
}
})
};

Bind  This method  adds rows for the list of values returned by the WebAPI.For each item it creates a new row.

function Bind(iCount, data)
{
$('#tblEmployees tr:last').after('<tr><td><input type="text" id="txtName' + data[iCount].Id + '" value="' + data[iCount].Name + '"/></td><td><input type="text" id="txtAge' + data[iCount].Id + '" value="' + data[iCount].Age + '"/></td><td><input type="text" id="txtId' + data[iCount].Id + '" value="' + data[iCount].Id + '"/></td><td><input id=btnDelete' + iCount + ' data-id="' + data[iCount].Id + '" type="button" value="delete" /></td><td><input id=btnUpdate' + iCount + ' data-id="' + data[iCount].Id + '" type="button" value="Update" /> <td></tr>');

}

BindMethods   This method is used to bind the click event of the Delete and Update buttons.In the click event handler we are setting the url of the controller.Also we are setting the type to DELETE and UPDATE.

In this method we bind the DELETE and UPDATE operations with the buttons in the table.

function BindMethods(iCount)
{
$("#btnDelete" + iCount).click(
function () {
var empdId = $(this).attr('data-id');
$.ajax({
url: "/api/values/" + empdId,
type: "DELETE",
success: function (data) {
$('#tblEmployees').find("tr:gt(0)").remove();
BindAll();
alert('DELETED');
},
error: function (xhr, status, error) {
alert(error);
}
});
}
);

$("#btnUpdate" + iCount).click(
function () {
alert($(this).attr('data-id'));
var empdId = $(this).attr('data-id');
var name = $("#txtName" + empdId).val();
var age = $("#txtAge" + empdId).val();
alert(age);
var employee = { Id: empdId, Name: name ,Age :age };//, { id: 2, name: "ankit" }, { id: 3, name: "atin" }, { id: 1, name: "puneet" }];
alert(employee.Name);
$.ajax({
url: "/api/values/" + empdId,
data: employee,
type: "PUT",
success: function (data) {
$('#tblEmployees').find("tr:gt(0)").remove();
BindAll();
alert('UPDATED');
},
error: function (xhr, status, error) {
alert(error);
}
});
}
);
}

Add   We bind this method to the btnAdd button in each row.

function Add() {
var empdId = $(this).attr('data-id');

var name = $("#txtName" + empdId).val();
var age = $("#txtAge" + empdId).val();
alert(age);
var employee = { Id: empdId, Name: name, Age: age };//, { id: 2, name: "ankit" }, { id: 3, name: "atin" }, { id: 1, name: "puneet" }];
alert(employee.Name);
$.ajax({
url: "/api/values/" + empdId,
data: employee,
type: "Post",
success: function (data) {
$('#tblEmployees').find("tr:gt(0)").remove();
BindAll();
alert('UPDATED');
},
error: function (xhr, status, error) {
alert(error);
}
});
}

 

 

Follow on: