JQuery Awesomeness
JQuery makes what used to be very tedious javascript features a few simple one liners. An added benefit is it is pretty much cross browser compatible. So you don’t need to code
Put all of the code you want to run at startup in here
1 2 3 4 5 | <script type="text/javascript" language="javascript"> $(document).ready(function(){ } </script> |
Various useful methods for JQuery
Selector for finding .NET form fields without needing the txtThisTextField.ClientID to determine it’s name
This uses the ‘EndsWith’ selector feature. So in this instance we are finding the
1 | $('[id$=cbEnable]') |
Checkbox features
Then to trigger this checkbox as if it was clicked by the user (useful when you have other onlick feautres in place on the target)
1 | $('[id$=cbEnable]').trigger('click'); |
To check if a checkbox is checked
1 | $('[id$=cbEnable]').attr('checked') |
DropDown Lists
To set the value of a dropdown list
1 | $('[id$=ddStatus]').val('10000'); |
To detect the value of a dropdown list
1 2 | if ($('[id$=ddlBrowser]').val() == 'Other') alert("The dropdown is set to 'Other'"); else alert("The dropdown is set to: " + $('[id$=ddlBrowser]').val()); |
To call a function on dropdown list change
1 2 3 4 | $('[id$=ctlTaskAddNotes_ddPercentComplete]').change(function() { alert('It got changed'); }); |
Misc other stuff
The toggle event will alternate between two statements. In this example click on the div id=”issueDetails” hides and shows all elements with class id=”issueInfo”
1 2 3 4 5 | $('#issueDetails').toggle(function() { $('.issueInfo').show(); }, function() { $('.issueInfo').hide(); }); |
Another way of hiding and showing or changing other css properties
1 2 | $('#fieldToHide').css('display', 'none'); $('#fieldToShow').css('display', 'inline'); |
More great plugins here
http://flowplayer.org/tools/demos/index.html