JQuery BlockUI Plugin does not unblock on IE6/7

I had a problem while using the JQuery plugin, blockUI, that the page did not unblock on IE6. However, it worked quite well on Google Chrome and FireFox. The problem turned out to be an unclosed HTML center tag. However, it is not necessarily the center tag, it could be any unclosed tag.

Select Server controls using JQuery

Selecting a server control using JQuery with the following syntax

$('#dropDownList1')

does not always gurantuee to return the control. The idea is that ASP.Net server controls create dynamic ids in case of duplicate control name or if the control is contained within a user control that is placed on page. Therefore, using the above statment will not always return the control except in the default case that the control is inserted directly to the page and there are no naming conflicts. So, In order to select the control using JQuery you will have to use the following statement:

$('#<=dropDownList1.ClientID>')

How to Add/Remove items from a dropdownlist using JQuery

< asp: DropDownList ID="ddlMyCombo" runat="server" ></asp: DropDownList > 

In order to clear a dropdownlist items using JQuery:
$('#ddlMyCombo >option').remove();

for more about the JQuery Seletor expressions take a look on my post JQuery Selector Expressions Demystified

What I am doing here is selecting all the option elements that are child of the element with ID “#ddlMyCombo” which is the dropdownlist id and then deleting them. Doing this is gonna clear all elements of the dropdownlist.

So now in order to add items again to the dropdownlist, we will simply append options HTML elements to our test combo
var myCombo= $('#ddlMyCombo');
myCombo.append($('< option > </option>').val(1).html(option1Text));

What I have done here is that I have selected the dropdownlist first just for convenience. It is similar to saying
document.getElementById('ddlMyCombo')
I then start appending HTML option items to my dropdownlist and set the item value and text.

JQuery filter method .filter( )

The JQuery .filter( ) method is used to select a list of objects that match the applied filter. Filters can be applied whether using selector expressions or JQuery functions:

.find (Selector Expression):

Applying the fitler $('tr').find( ' : odd') on the following HTML snippet
<tr> item 1 </tr>
<tr> item 2 </tr>
<tr> item 3 </tr>
<tr> item 4 </tr>
<tr> item 5 </tr>
<tr> item 6 </tr>

will return item 2, item 4, item 6

for more about the JQuery Seletor expressions take a look on my post JQuery Selector Expressions Demystified

.find (Function):

Applies the specified function on each item and return only those that the function evaluates to true upon.

Applying the filter expression $('tr').find(function(index) { return index == 1;}) will return the second item with index 1.

JQuery Selector Expressions Demystified

JQuery offers a comprehensive API for searching and locating HTML elements. I discuss here the syntax and semantics  of the JQuery Selector Expressions.

Selecting all elements with a specific tag type:
$('table'): Selects all HTML table elements.
$('div'): Selects all div table elements.

Selecting a unique element with a specific ID:
$('#btnSelect'): Selects the element with the id btnSelect regardless of its type. However, you can still specify the element type in case you have multiple different element types with the id. For example, if you have a div element that is called “Select” and a button element that is called also “Select”. In order to select the div element you can use the following select expression:
$('div#Select'): Selects the element with id “Select” and tag type “div”.

In case of multiple elements of the same type and id, only the first one will be returned unless you selected all of them.

Selecting elements with a specific CSS class name:
$('.cssClass1'): Selects all elements with css class “cssClass1”.
$('.cssClass1.cssClass2'): Selects all elements with css classes “cssClass1” and “cssClass2”.
$('div.cssClass1.cssClass2'): Selects all div elements with css classes “cssClass1” and “cssClass2”.

Selecting elements with a specific tag that are descendants of another tag element:
$('h2 a'): Selects all anchor elements that are descendants of an h2 element.

A descendant of an element is child or grandchild or any sub element of the parent element.

so what if you want to select a direct child and not one of the descendants?
$('h2>a'): Selects elements with tag type “a” and that are children of h2 element.
$('h2+a'): Selects a elements that follows h2 element on the same level, sibling.

The + and the ~ operators are pretty much the same except that the + matches the two operands are immediately after each other. On the other hand, the ~ operator matches all general siblings within the same level, not necessarily after each other.

Selecting multiple elements:
$('*'): Selects all elements
$('div>*'): Selects all elements that are descendants of div element.
$('h2,img,table,a'): Selects any of the mentioned elements.
$('img : first-child'):Selects the img element that is the first element of its parent.
$('img : last-child'):Selects the img element that is the last element of its parent.
$('img : nth-child(3)'): Selects the third child img element of their parents.

The difference between the nth and the nth-child methods is that nth compares the element index, 0 based. Where as the nth-child comapres the count of the elements to the specified element. In other words, saying the nth(2) is similar to saying element[2] which is the third element. Where as saying nth-child(2) is the second member of the children, element [1].

$('img : only-child'):Selects img elements that are the only child of their parents.
$ ( ' only-child'): Selects all elements that are the only child of their parents.
$('div:empty'): Selects all div elements that have no children.
$(':empty'): Select all elements that have no children.
$('img:not('.cssClass1')): Selects all img elements that does not have the cssClass1 style applied.

Form Selectors:

$('tr:first'): Selects the first tr elements.
$('tr:last'): Selects the last tr elements.
$('tr:even'): Selects all tr elements with a even index.
$('tr:eq(3)'): Selects the 4th tr elements.
$('tr:nth(3)'): Selects the 4th tr elements.
$('tr:gt(3)'): Selects tr elements that has an index greater than 4.
$('tr:lt(3)'): Selects tr elements that has an index less than 4.
$('P:cotnains(Sample Text)'): Selects all P elements that contain the specified text, “Sample Text”.
$('button:visible'): Selects all visible buttons.
$('button:hidden'): Selects all hidden buttons.

Using XPath:

You can use the XPath expression to select elements from the DOM:
$('a//img'): Selects img elements that are descendants of an a element.
$('a/img'): Selects img elements that are a child of an a element.
$('cssClass1/..'): Selects the parent element of all elements that have the cssClass1 applied.
$('a[img]'): Selects all a elements that contain an img element.
$('a[@src]'): Select all a elements that has a src attribute.
$('a[@src="codeleacher.wordpress.com"]'): Select all a elements that has a src attribute equal to codeleacher.wordpress.com.

$('a[@src="codeleacher.wordpress.com"]') and $('a[@src=codeleacher.wordpress.com]') are the same. 

$('a[@src!="codeleacher.wordpress.com"]'): Select all a elements that has a src attribute not equal to codeleacher.wordpress.com
$('a[@src^="code"]'): Select all a elements that has a src attribute starts with the string code.
$('a[@src*="code"]'): Select all a elements that has a src attribute contains the string code.
$('a[@src$=".com"]'): Select all a elements that has a src attribute ends with the string .com