JQuery Predicates - Attribute contains

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkRedAttributeContains").click(showRedContains);
• $("#lnkYellowAttributeContains").click(showYellowContains);

To find an element with an id of 'HelloGoodbyeAttributeContains'
click me yellow
click me red

The click me red also finds the two links as their ids match the predicate. The click me yellow is specifically looking for div elements therefore the two links are not turned yellow.

JQuery Predicate, attribute Contains
$("[ @id *= 'ributeCont' ]").removeClass("YellowAttributeContains").addClass("RedAttributeContains"); 
$("div[ @id *= 'ributeCont']").removeClass("RedAttributeContains").addClass("YellowAttributeContains"); 

JQuery Predicates - Attribute ends with

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkRedAttributeEndsWith").click(showRedEndsWith);
• $("#lnkYellowAttributeEndsWith").click(showYellowEndsWith);

To find an element with an id of 'HelloGoodbyeAttributeEndsWith'
click me yellow
click me red

The click me red also finds the two links as their ids match the predicate. The click me yellow is specifically looking for div elements therefore the two links are not turned yellow.

JQuery Predicate, attribute Ends With
$("[id$='teEndsWith']").removeClass("YellowAttributeEndsWith").addClass("RedAttributeEndsWith"); 

or

$("div[id$='teEndsWith']").removeClass("RedAttributeEndsWith").addClass("YellowAttributeEndsWith"); 

JQuery Predicates - Attribute starts with

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkRedAttributeStartsWith").click(showRedStartsWith);
• $("#lnkYellowAttributeStartsWith").click(showYellowStartsWith);

To find an element with an id of 'HelloGoodbyeAttributeStartsWith'
click me yellow
click me red

JQuery Predicate, attribute Starts With

$("[id ^= 'HelloGoodbyeAttributeSt']")
    .removeClass("YellowAttributeStartsWith")
    .addClass("RedAttributeStartsWith"); 

  or

$("div[id^='HelloGoodbyeAttributeSt']")
    .removeClass("RedAttributeStartsWith")
    .addClass("YellowAttributeStartsWith"); 

JQuery Predicates - Attribute equals

This example uses JQuery attribute selector to add or remove a css class from an html element.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkRedAttributeEquals").click(showRed)
• $("#lnkYellowAttributeEquals").click(showYellow);

click me yellow
click me red

This is an html div element with an id="HelloGoodbyeAttributeEquals"

 

JQuery Predicate, id attribute equals
$("#HelloGoodbyeAttributeEquals").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

or another syntax for an id attribute equals

$("[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

or a div tag with an id equals

$("div[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

function showRed(e) {
    e.preventDefault();
    $("[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals")
                                           .addClass("RedAttributeEquals");
}

function showYellow(e) {
    e.preventDefault();
    $("#HelloGoodbyeAttributeEquals").removeClass("RedAttributeEquals")
                                     .addClass("YellowAttributeEquals"); 
}   

A RadioButton is a Checkbox

If you have this code and you are dealing with a RadioButton control
then the output CSS class will be HighlightedBackgroundCheckbox because
a RadioButton is a Checkbox.

Simple fix is to check its a radiobutton first.

namespace System.Web.UI.WebControls
public class RadioButton : CheckBox

foreach (string boundNameToCompare in boundNames)
{
    CheckBox cb =
        this.FindControl(this.TargetControlID) as CheckBox;
    if (cb != null)
    {
        cb.CssClass = "HighlightedBackgroundCheckbox";
        continue;
    }

    RadioButton rb =
        this.FindControl(this.TargetControlID) as RadioButton;
    if (rb != null)
    {
        rb.CssClass = "radio HighlightedBackground";
        continue;
    }

}

Learning Simple JQuery - Part 4.

There are many plugins developers have created to use with JQuery, including this one "tablesorter" - http://tablesorter.com/docs/

• Add JQuerify to this page (Get JQuerify here)
• Add table sorter to this page as a bookmarklet - TableSorter Bookmarklet
• $("#myTableSorter").tablesorter();

The following table should then have clickable/sortable headings.

/tbody>

Row Number	Big Number	Word	Date
1	4345	Animal	23 January 1987
2	32546	Vegetable	18 November 2005
3	265	Mineral	9 September 1973
4	4456	Element	31 December 1976
5	56	Zebra	14 August 2008

This simple JQuery example was taken from Stephen Walthers PDC 2008 talk.
http://channel9.msdn.com/pdc2008/
http://channel9.msdn.com/pdc2008/PC31/

Learning Simple JQuery - Part 3.

This example demonstrates using JQuery selectors to add css classes to specific html table row elements.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following JQuery to page using console in FireBug

• $("#myColourTable tr:odd").addClass("tablerow"); $("#myColourTable tr:even").addClass("tablealtrow");
• $("#myColourTable tr:first").removeClass("tablealtrow").addClass("heading");

Row Number	Big Number	Word	Date
1	4345	Animal	23 January 1987
2	32546	Vegetable	18 November 2005
3	265	Mineral	9 September 1973
4	4456	Element	31 December 1976
5	56	Zebra	14 August 2008

This simple JQuery example was taken from Stephen Walthers PDC 2008 talk.
http://channel9.msdn.com/pdc2008/
http://channel9.msdn.com/pdc2008/PC31/

Learning Simple JQuery - Part 2.

This example uses JQuery to set the background-color of input text boxes, and attaches the focus/blur events to those text boxes with a "required" class.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following JavaScript to the page using the console tab in FireBug

• $("input:text").css("background-color", "yellow");
• $("input:text.required").focus(hilite); $("input:text.required").blur(unlite);

a textbox

a required textbox

 
  function hilite() {   
   $(this).css("background-color", "red"); 
  }
  
  function unlite() {   
   $(this).css("background-color", "yellow"); 
  }

This simple JQuery example was taken from Stephen Walthers PDC 2008 talk.
http://channel9.msdn.com/pdc2008/
http://channel9.msdn.com/pdc2008/PC31/

Learning Simple JQuery - Part 1.

This example demonstrates using an jQuery id selector on anchor tags to attach a click event. It also uses an id selector to attach the slideDown and slideUp JQuery functions to a html div element.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkShowLoginBox").click(showLoginBox);
• $("#lnkHideLoginBox").click(hideLoginBox);

Show Me Code - Hide Me Code

 
function showLoginBox(e) {  
   e.preventDefault();  
   console.log('in fn. showLoginBox');  
   $("#PaulsPointLoginBox").slideDown("slow");  
 }  
   
 function hideLoginBox(e) {  
   e.preventDefault();  
   console.log('in fn. hideLoginBox');  
   $("#PaulsPointLoginBox").slideUp("slow");  
 }  

This simple JQuery example was taken from Stephen Walthers PDC 2008 talk.
http://channel9.msdn.com/pdc2008/
http://channel9.msdn.com/pdc2008/PC31/

JavaScript - get the client Id inside a formview

Code snippet to get the client id of an asp control inside a formview

  var radio = $get('<%= searchFormView.FindControl("RangeRadioButton").ClientID %>');
  if (radio.checked)
  {
  }