I just uploaded a new copy of jQuery templates with a fix for $.fn.text() and $.fn.html(), I was not passing the options object in correctly (silly mistake) and thanks to Chris Jaure, if you were using either of these methods to simply return a value they now work correctly as well.

jQuery Templates available at: http://stanlemon.net/files/jquery.template.js

Back in November I wanted a mechanism to communicate messages after an ajax request to my PageSite users. I experimented with a number of things and initially had a terribly ugly manipulation of the green and red message boxes you'll see on this type from time to time. There were a couple of big problems though, first the code was originally written for Prototype so it sucked, and second it was not very portable. Ultimately I wanted something that looked good, was well written and could be reused in a number of different ways.

When PageSite was converted to using jQuery for all of its javascript I rehashed a lot of stuff. There was some old javascript code that had been floating around since 2004 when I first prototyped out PageSite 4.0's admin panel. To cut to the chase... I stumbled across Humanized Messages, which was close to what I wanted to do, but not yet there. This plugin got me to thinking, though, what I'd really like is something that looked like Growl. For those not on OS X, take a look at the website and you'll see that Growl is a system-wide notification system.

As a result, while Erich was out here visiting I fleshed out an initial concept. I called it jGrowl, spinning off of the OS X solution. It's pretty simple to use out of the box:

Today I sat down and cleaned up some of the plugin, namely I removed a dependency on the metadata plugin in favor of $.fn.data() and I also namespaced all of the events, which should allow you to attach other events to the jGrowl nodes and deal with them without jGrowl unbinding them on you.

The plugin still needs some work, I'm not sure how much I like styling it with javascript - at the same rate, I like the idea of styling different notifications differently as well. I'd also like to see some callback options, the animations customizable and I'd like to potentially add some internal sorting using the "header" option. These things, though, will come in time - for now I just want to get the plugin out so I can get some feedback.

Update 8/21/08: You can download jGrowl from it's jQuery plugin page at: http://plugins.jquery.com/project/jgrowl

As I continue to get feedback on the jQuery Templates plugin I've ported from Ext I'm trying to implement the suggestions I've received. Subsequently, I've uploaded another round (or two) of changes. The changes I've made are:

• Moved the $template object to $.template.instance, so that the object can be access from the jQuery object and extended easily - what was I thinking before??
• Renamed the "re" property to "regx", and this is now an object containing several different regular expression options (jsp, jtemplates and ext for starters).
• You can now change the standard regular expression by setting $.template.regx.standard = $.template.regx.myregexp;
• Templates can utilize custom regular expressions on a per-template basis, ie. var t = $.template("<div>...</div>", { regx: 'ext' });
• In addition to the methods that use domManip() I've updated html() and text() to handle receiving jQuery Templates as well.

I hope to add some kind of callback to the plugin as well, so that you can specify a method to be called after a template has been created or applied. I'm still thinking this through and will post more once I implement it.

I've done some more work on my jQuery Templates proposal. First, by request from some on the jQuery lists I've removed the usage of the $.ui namespace, although it really functioned completely independent of jQuery.UI. Second, I've added a modification to override the jQuery domManip() method, which is a method called by other methods like insertBefore() and append() and handle DOM manipulation within the jQuery core. Now, you can pass any of the manipulation methods your jQuery Template object and as a second parameter the object of properties for replacement. This changes the syntax to:

I'm going to resubmit my proposal to jquery-en and jquery-ui for consideration and review. If you're interested in looking at the code, it's available at:
http://stanlemon.net/files/jquery.template.js

Some conversation at work arose about templating in jQuery. The honest answer to anyone inquiring about this is that jQuery lacks any real good solution for simple macro-based templating. I was directed to Ext, which has a Template library in it that does exactly this. Subsequently, I've proposed to the UI folk a port of Ext.Template. For the most part the port is direct, the apply() and compile() methods are virtually identical to Ext.Template, though they use some jQuery functions instead of Ext.Core functions. The constructor is very different, and the designation of compiling is via a jQuery-style options object passed to the template constructor. I've tried to follow the jQuery.UI API as best as I know. I've changed the formatter usage in Ext.Template, as it depends on Ext.util.Format which isn't available in jQuery. All in all, this functionality does not seem like it's necessary so I changed it to use what I'm calling "helpers". These helpers provide the variable:method() syntax like in Ext.Template but allows the designer to customize what functions are available in a jQuery-style way.

Updated 03/12/2008: Anyhow, the code for my port and proposal is available here:
http://stanlemon.net/files/jquery.template.js