jQuery Notes
Hey: there’s early 2009 jQuery and then there’s 2010 jQuery (but not quite the latest). These notes serve to mark my jQuery experience as ‘updated’ compared to, say, Bryan of three months ago.
“New Official jQuery Plugins Provide Templating, Data Linking and Globalization”
John Resig: “Today, we’re very happy to announce that the following Microsoft-contributed plugins—the jQuery Templates plugin, the jQuery Data Link plugin, and the jQuery Globalization plugin—have been accepted as officially supported plugins of the jQuery project. As supported plugins, the jQuery community can feel confident that the plugins will continue to be enhanced and compatible with future versions of the jQuery and jQuery UI libraries.”
My notes today will not include any experience with these new features in jQuery. It is worth mentioning that jQuery “Templating” is an appreciated addition that addresses what is lively (as in not “dead”) about Silverlight declarative UI programming.
jQuery UI and Theme Roller
jQuery UI now includes the Auto-Complete plug-in from Jörn Zaefferer. The Theme Roller Web application displays the plug-in. Now, some remarks about Theme Roller:
- The URI-based format for a ‘saved’ theme is cumbersome.
- The ZIP archive of the custom theme uses earlier versions of jQuery, so, like Visual Studio IntelliSense support, it is out of date with the latest jQuery release. John Resig is awesome but he’s not that Blue Guy from the Watchmen!I need to see a Theme Roller workflow that someone is proud of…
New and awesome (to me) API features…
- The
jQuery.closest()method was there in version 1.3 (c. 1/2009). I use this quite a bit now. - The
jQuery.addClass()and.removeClass()methods were in jQuery since 1.0 (which is an embarrassment to me) but less than a month ago I was using.attr('class', 'foo')and.removeAttr('class')(which also betrays a lack of understanding of how HTML supports multiple CSS classes). - The
jQuery.is()function provides truth tests for selectors. Another one from version 1.0 that escaped me! - This is how to use the
.val()function withselectelement options:$('select.foo option:selected').val(); - About the
:nth-child()selector: “Because jQuery’s implementation of:nth-child(n)is strictly derived from the CSS specification, the value ofnis ‘1-indexed’, meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript’s ‘0-indexed’counting.”### Exotic Internet Explorer Issues
Using $('…').css('background-color', '…') to set the backgroundColor property on a DOM node that does not have this property throws an “invalid property value” error for Internet Explorer 8, running in IE7 mode (with Developer Tools). Evidently, in IE7, tr, td and option do not have a backgroundColor property. Instead of doing this, it is better to use jQuery.addClass() and .removeClass() methods (see above)—or the .toggleClass()method—to toggle the CSS class that controls background color.
C# Influences
The way I use Func<T> and Action<T> in C# influences how I share ‘local’ functions in JavaScript. Here is a pattern I’m indulging these days:$.irpc.renderTable = function (serviceData) {
var func = this;
$('#DataTable tbody').each(function () {
func.enableEditButton = function (editButton) {
//define rules to enable/disable edit button:
}
}
}The idea here is to avoid Doug Crockford’s “too many vars error” (but I actually dial this down in JSLint for Visual Studio 2010).
The jQuery Validator is freaking huge!
Any documentation introducing the jQuery Validation plug-in should never underestimate its conceptual size and complexity. Simultaneously, it’s quite easy to use (for ‘simple’/declarative cases). My attempt to capture all of the aspects of this plug-in are preserved on my new Azure server. Here are some additional points:
- The
.rules()method requires$("form").validate()to be called first. - It is quite tempting to assume that naming form elements with array notation will make Validator validate all elements of that name. No! It only validates the first element of that name. One solution to this problem is to rewrite the Validate source code (not attractive to me). Another solution is to imperatively handle the click event of the form-submit button.### The Grid is Not Trivial
There are reasons why—after over four years of jQuery—there’s no accepted (free) grid solution. (Here, by the way, is where Microsoft can really kick ass.) Some points below sketch out this space:
-
“Tables in HTML documents” …“TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.”
-
“jQuery Grid Recommendations” …“I like the jQuery Grid (#2 above) better than Flexigrid mostly because it supports editable cells, and has very good documentation and samples on the website.”
-
“Walkthrough: full example of using MvcContrib grid with jQuery datatable”### Related Links
-
“jQuery Templates and Data Linking (and Microsoft contributing to jQuery)”
-
“jQuery Leaking Memory: Be careful while using in big applications”
-
jQuery Docs: “How do I test whether an element exists?” The “official” answer to this question excludes mentioning the
.is()function, which can be useful in such existence tests. -
jQuery Docs: “One of the selector languages that jQuery supports, as a part of its expression language is XPath.”
-
“jQuery Intellisense in VS 2008” …“Save the jquery-vsdoc.js file next to your jquery.js file in your project (and make sure its naming prefix matches the jquery file name)…”
-
“15 jQuery Plugins For A Better Photo Gallery And Slideshow”