first_page
space people space time space visitors

jQuery Notes

Amazon.com productHey: 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 with select element 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 of n is ‘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:

rasx()