Crazy Config Techie

Monday, 12 September 2011

jQuery Content Filter

The Content Filter filters the Dom Elements according to the content. Given below the types of content filters

Given below the types of content filters :

: contains() Selector
It filters the elements which have the matched text.
Example :

<script>$("div:contains('Ankit')").css("text-decoration", "underline");</script>

It filters the div which have 'Ankit' as text and underline them.

: empty Selector It filters the elements which are empty. Here empty means they don't have children or text.
Example :

<script>$("td:empty").text("Was  empty!").css('background', 'rgb(255,220,200)');</script>

It filters all the 'td' element which don't have any child or text and fill it with text "Was empty" and change it's background color.

:has() Selector
It filters the elements which contains the element provided to ' has() '.
Example :

<script>$("div:has(p)").addClass("test");</script>

It filters all the 'div' elements which have 'p' (paragraph) inside it and add the css class 'test' to it.

: parent Selector
It selects all the elements that have at least one child including text .

Example :

<!DOCTYPE html>
<html>
<head>
<style>
td { width:40px; background:green; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<table border="1">

<tr><td>Ankit</td><td></td></tr>
<tr><td>Vinita</td><td></td></tr>

</table>
<script>$("td:parent").fadeTo(1500, 0.3);</script>
</body>
</html>

Output :

jQuery Visibility Filter

This filter filters the element according to their visibility. Means it filters by either hidden or visible

Properties:

: hidden Selector
It filters all the element that are hidden .

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">It was hidden! appears for 3000ms</div>
<div></div>
<div class="starthidden">It was Hidden! appears for 3000ms</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span>
</span>
<script>
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>
</body>
</html>

Output :

: visible Selector
It filters all the elements that are visible .

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>

<div></div>
<div style="display:none;"></div>
<script>
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});

</script>
</body>
</html>

Output :

After execution :

After clicking each box :

After clicking button :

jQuery Child Filter

Child filter basically handles filtration according to parent-child relationship
Some main Child filters are given below :

: first-child Selector

It filters all the elements which are first child of their parent.
Example :
$("div span: first-child").css("text-decoration", "underline")
It filters the first span of each matched div.

: last-child Selector

It filters all the elements which are last child of their parent.
Example :
$("div span: last-child").css({color:"red", fontSize:"80%"})
It filters the last span of each matched div.

: nth-child Selector

It filters all the elements which are nth child of their parent.

Example : (nthChildSelector.html)

<!DOCTYPE html>
<html>
<head>
<style>

div { float:left; }
span { color:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div><ul>
<li>Ankit</li>
<li>Ravi</li>
<li>Bharat</li>

</ul></div>
<div><ul>
<li>Satya Prakash</li>
</ul></div>

<div><ul>
<li>Gyan</li>
<li>Neha</li>
<li>Bikrant</li>
<li>Anushmita</li>
</ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>
</body>
</html>

Output :

Finds the second li in each matched ul and notes it.

: only-child Selector

It filters all the elements which are only child of their parent.

Example : (onlyChildSelector.html)

<!DOCTYPE html>
<html>
<head>
<style>

div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>

<div>
<button>Sibling!</button>
</div>
<div>
None
</div>

<div>
<button>Sibling!</button>
<button>Sibling!</button>
<button>Sibling!</button>

</div>
<div>
<button>Sibling!</button>
</div>
<script>$("div button:only-child").text("Alone").css("border", "2px blue solid");</script>
</body>
</html>

Output :

jQuery filters

The jQuery filter is used to filter out certain values from the object list based on certain criterion.

Uses of JQuery filter
The jQuery filter is used to filter out certain values from the object list based on certain criterion.
For example you can make a shopping cart website and display a list of products images in the main product display area. Then you can allow the user filter out the items based on some keywords. This way can make a nice gui for your application. You can get the data from server store in a list and then use the jQuery filter to filter out the data based on the user input.
Some of the key uses are given below :

It is very similar to selector in fact we can say that it is a type of selector to enhance the functionality of selector.
We can select filter according to their position.
We can select filter according to tag name.
We can select filter according to child, last-child ,nth child ,only child.
We can select filter according to their visibility.
We can select filter according to sibling, adjacent, or descendant etc.

The types of filters are listed detailed in next posts of this blog only ...

jQuery Selectors

These selectors uses CSS syntax to allow page developer to easily identify the elements of page to operate upon with jQuery library methods. For using JQuery library most effectively , you must be familiar with jQuery selectors.

Syntax pattern of jQuery selector :

$.(selector).methodName();
The selector is a string expression that identify the element on which the the method has to be implemented. For example :
$("p").click();
You can also hide the paragraph as follows :
$("p").hide();
You can also apply the CSS class to any element as :
$("p").addClass('box');

Types Of Selectors:

Uses of basic CSS selector

The basic selectors are known as 'find selectors' as they are used to find the element within the DOM.
Syntax:
$.(selector/Syntax).methodName();
Given below the uses of Basic CSS Selector according to "syntax" used :

SYNTAX	DESCRIPTION
*	Selects all elements
E	Selects all elements with tag name E.
E F	Selects all elements with tag name F that are descendants of E
E>F	Selects all elements with tag name F that are direct children of E.
E+F	Selects all elements with tag name F that are immediately preceded by a sibling of tag name E.
E-F	Selects all elements with tag name F that are preceded by any sibling of tag name E.
E : has(F)	Selects all elements with tag name E that have at least one descendant of tag name F.
E .C	Selects all the elements E that have a class name C. Removing C Removing E is identical to *.C
E#i	Selects all the elements E that have an id value of i. Omitting E is identical to *#i.
E[a]	Selects all the elements E that have an attribute 'a' of any value.
E[a=v]	Selects all the elements E that have an attribute 'a' whose value is exactly 'v'.
E[a^=v]	Selects all the elements E that have an attribute 'a' whose value starts with 'v'.
E[a$=v]	Selects all the elements E that have an attribute 'a' whose value ends with 'v'.
E[a*=v]	Selects all the elements E that have an attribute 'a' whose value contains 'v'.

Uses of Position Selectors

This selector select the elements according to their position in page. These selectors can be apply to any base selector.(it is denoted by B here). If it is omitted, it is assumed to be *.
Given below the uses of Position Selectors according to "syntax" used :

SYNTAX	DESCRIPTION
B:first	Selects the first element of element B
B:last	Selects the last element of element B
B:first-child	Selects all the elements from B that are first children.
B:last-child	Selects all the elements from B that are last children.
B:only-child	Selects all the element from B that are only children.
B:nth-child(n)	Selects all the element from B that are n-th ordinal children. Starts at 1.
B:nth-child(odd/even)	Selects all the element from B that are even or odd ordinal children. The first child is considered odd(ordinal1)
B:nth-child(Xn+Y)	Selects the Y element from B after every Xth element of B.
B:even	Selects the even elements of B.
B:odd	Selects the odd elements of B.
B:gt(n)	Selects the element after the nth element of B. Starts at 0.
B:lt(n)	Selects the element before the nth element of B. Starts at 0.
B:eq(n)	Selects the nth element defined with in B element.

Uses of jQuery Custom Selector :

This selector select the elements according to their type or some property. These selectors can be apply to any base selector.(it is denoted by B here). If it is omitted, it is assumed to be *.
Given below the uses of Custom Selector according to "syntax" used :

SYNTAX	DESCRIPTION
B:animated	Selects one of elements of B that are currently under the animated control of one of the jQuery animation method
B:button	Selects the elements of B of any button type.
B:checkbox	Selects the elements of B of checkbox type.
B:enabled	Selects the elements of B that are in enabled state.
B:file	Selects the elements of B of file input type.
B:header	Selects the elements of B of header type(H1 to H6).
B:hidden	Selects the elements of B that are hidden.
B:image	Selects the elements of B of image input type.
B:input	Selects form input element from B. i.e. input, select,textarea,button.
B:not(f)	Selects the elements from B that do not match the filter selector specified by f.
B:parent	Selects the elements of B that are parents of non-empty element children
B:password	Selects the elements of B of password type.
B:radio	Selects the elements of B of radio input type.
B:reset	Selects the elements of B of reset input type.
B:selected	Selects the elements of B that are in selected state.
B:submit	Selects the elements of B of submit input type.
B:text	Selects the elements of B of text input type.
B:visible	Selects the elements of B that are not hidden.

JQuery Introduction

Why JQuery:
JQuery is great library for developing Ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
The jQuery library is providing many easy to use functions and methods to make rich applications. These functions are very easy to learn and even a designer can learn it fast. Due to these features jQuery is very popular and in high demand among the developers. You can use jQuery in all the web based applications irrespective of the technology.

Features Of JQuery:

Selection of DOM elements :
The jQuery selector provide us capability to select DOM elements so that we can add functionality to them using methods of jQuery. It is using CSS 3.0 syntax which provide us freedom to select one or more elements. Using CSS , you can select element by id, class and collaborate with events to increase it's functionality.
The wrapped set
The selected elements reside inside a object known as wrapped set. It contain all the selected DOM elements, it has array like structure. You can traverse through this like an array and can select elements using index.
Events
jQuery provide simplified event handling, You can easily bind and unbind events and for supported browsers it also provide a normalized event model due to this it is very easy to handle events.When any event occurs , it is called under the context of the event that triggered it.
Extensibility through plug-ins
The jQuery architecture provide us freedom to extend functionality using plug-ins . The plug-ins are easy to use and easy to clip with your page. You just need to set parameters to use these jQuery plug-ins and also need to include plug-in file. Some the main jQuery plug-ins are :
1.XML and XSLT tools
2.cookie handling
3.datagrids
4.drag and drop events.
5.modal windows
6.dynamic lists
7.webservices
8.Ajax helpers
9.even a jQuery-based Commodore 64 emulator.
Cross-browser support
In JavaScript, the DOM implementations for event handling vary considerably between browsers. Where as jQuery providing a normalized event model for all supported browsers that makes it very easy to handle events.
Ajax support
AJAX stands for Asynchronous JavaScript and XML . Using AJAX we can connect to database and also can fetch the data from the server's database without refreshing the page. JQuery have very effective AJAX methods library to extend the functionality of AJAX.
Compatibility with languages
The jQuery script can be used with nearly all the web languages. Some of Frequently used languages with jQuery are given below:
1.PHP
2.JSP
3.ASP
4.Servlet
5.CGI

How JQuery Works:

Traditionally developer's are using Window.onload() function to initiate some action on page load. There is one drawback with this function. It does not fires until all the images including the advertisement banner are loaded. So, window.onload() can be painfully slow. The jQuery provides the solution for this problem. The $(document).ready(function(){}) solves the issue.

It is fired once the Document Object Model is ready. So, you can use this to run any type of JavaScript to suite your business needs.
Here is the code that will display alert message once Document Object Model is ready:

$(document).ready(function(){
// Your code here...

alert("Hello");
});

This method will be called once Document tree is ready. Here you can add any JavaScript function.

Sample Example on JQuery:

 <html>

<head>

<title>jQuery Hello World Alert box</title>

 

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">



</script>

 

</head>

 <script type="text/javascript">

$(document).ready(function(){

$("#cl").click(function(){

alert("HELLO WORLD!");

});

});

</script>

<body>

<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>

<br>

<br>

<button id="cl">Click Me</button>

</body>

</html>

Friday, 9 September 2011

Accesing The JSON Webservice with JQuery

To call the Web Service from client-side, I have used JQuery’s ajax method. In JQuery’s ajax method, you need to set the request type to post, as an AJAX Web Service (by default) doesn’t allow methods to be called via the HTTP GET method (how to enable HTTP GET in a Web Service?). For your information, ASP.NET AJAX controls like UpdatePanel uses HTTP POST when sending asynchronous requests. Below is the JQuery method that will call the Web Service method.

$.ajax({
        type: "POST",
        data: "{'prefix':''}",
        url: "/YourWebService.asmx/MethodName",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: functionToCallWhenSucceed,
        failure: funcitonToCallWhenFailed
});

See the following Example...

Here I'm using the Webservice  earlier created in this blog...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             $("#btnsubmit").bind("click", function () {

                 var name = $("#txtname").val();

                 $("#query_results").empty();

                 $("#query_results").append('<table id="ResultsTable" class="AccountsTable"><tr><th>AccId</th><th>AccName</th></tr>');

                 $.ajax({

                     type: "POST",
                     url: "WebService.asmx/GetAccountdetailsByName",
                     data: "{'name':'" + name + "'}",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",

                     success: sucesscallback,
                     error: FailureCallBack

                 });
             })
         });


         function sucesscallback(msg) {

                         var c = eval(msg.d);

                         for (var i in c)
                          {

                             $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td></tr>");

                         }
                     }

                     function FailureCallBack(data) {
                         alert("Failure");
                     }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <input type ="text" ID ="txtname" runat ="server" />
         <input type="button" ID ="btnsubmit" value ="submit" runat ="server" />
    </div>
    <div id="query_results">
    </div>
    </form>
</body>
</html>