One of the most interesting and useful jQuery plugins for a developer posting code snippets on the web is Chili. Chilli stands for “code highlighter”, is written and maintained by Andrea Ercolino and published under the MIT opensource license.

To use the plugin, you need to include the plugin itself and all the recipse you’d like to use. A recipe consists of JavaScript to parse code and add elements and classes and some CSS to format that code. Version 1.8 is delivered with recipse for C++, C#, CSS, Delphi, HTML, Java, JavaScript, Lotusscript (lo and behold), Mysql (I guess SQL with MySQL specifc extensions) and PHP. More details and lots of example can be found in the Chili manual.

You should chose which recipse you need on your side and include both .js and .css files. On this site I’ve added recipes for Java, HTML, CSS and JavaScript, packing all recipse together with jQuery and plugins and putting the recipes CSS into my main stylesheet. It’s a bit work, but a one-trime process, and definitely worth the trouble, because:

Once you have Chili loaded, it does its work in the background, at least that is the mode I prefer. When I post some snippet of code, I just have to add a class=”css” to the code-element to get Chili do its work. For example:

<pre><code class="html">some html</code></pre>

If I’d use class=”css” instead, the outcome would be different:

<pre><code class="css">some html</code></pre>

Chili still recognizes “pre” and “code” as keywords and “css” as a string, but uses a different classes and styles.

For reference, I use this CSS to format pre and code elements:

pre code {
	display: block;
	padding: 5px;
	background-color: #eee;
	border: 1px solid #d3d3d6;
	border-left-width: 5px;
	white-space: pre;
	overflow-x: auto;
	width: 98%;
}
code {
	color: #666;
	font-family: 'lucida console', 'Courier New', monospace;
	font-size: 0.9em;
	font-size: 1em;
}

Again nicely fomatted thanks to Chili.

Coming up next on this series of the plugin parade: Masked input plugin.

String.prototype.trim = function(){
	return this.replace(/(^\\s+|\\s+$)/g, "");
};

It provides a very powerful method, it can often be useful when working with Strings, eg. when formatting text from form inputs. Adding it as String method via the String.prototype makes the usage easier then a class global function. Instead of trim(“somestring”), you can simply call “somestring”.trim().

So what’s the problem? Why not just add all kind of stuff to different prototypes? We could add all the new Array methods supported by Firefox, which are missing in other browsers, like forEach. Add while we are at it, we could add some useful methods to the Object prototype, and use these methods with all our objects. Like this debug method:

// don't try this at home!
Object.prototype.debug = function(){
	console.debug("debugging " + this);
	for(key in this) {
		console.debug("key: " + key);
		console.debug(this[key]);
	}
};

Adding the above to your scripts would shatter jQuery and every other script, library or framework that relies on for(key in object) loops. Something that you’d rather avoid to do.

Consider the debug method above, and this example:

var myObject = {
  name: "peter",
  age: 21
};
myObject.debug();

What do you expect what be logged on your Firebug console? This?

debugging [object Object]
key: name
peter
key: age
21

Close, and wrong. You get this:

debugging [object Object]
key: name
peter
key: age
21
key: debug
function()

Ok, nothing to worry about, eh? We added the debug method to the Object prototype, so it makes sense that it appears there.

But it also appears everywhere else, something we definitely don’t want.

So no Object.prototype, what about problems with String or Array prototypes? The same problem applies: When you use a for(key in object) loop on Strings or Arrays, you’d also find the added methods. As there is basically no need to use that loop on Strings or Arrays, it’s more up to your enviroment. To you work with others or with code from others, that you don’t control? Is there any chance that there is a loop on an extended object? Bad. Go to prison. Do you work alone and/or you have control over all code involved? Fine. Read on.

Whew, that was a rather long introduction. Now only sugar for the rest of the day: The “methods” plugin!

Currently it provides six sexy String methods (trim, camelize, startsWith, endsWith, truncate and stripTags) and seven sexy Array methods (forEach, every, some, map, filter, indexOf and unique). Apart from unique, the Array methods are already provided by Firefox as “Javascript 1.7″. For that reason, both plugins add only methods that don’t already exists. To guarantee compability, an extensive testsuite tests for both native and new methods.

Array methods plugin source (contains documentation)
String methods plugin source (contains documentation)
Testsuite
Mozzila’s documentation for the new Array methods

In case you don’t want to use the complete package or can’t use the prototype approach: Feel free to pick only those methods that you need or only the involved regular expressions (from trim, camlize and stripTags).

If you have useful methods that you’d like to provide: Just let me know. Some additional Date methods are very appreciated.

Prison

So you are in prison, need some array/object iterators and can’t or don’t want to use prototype extensions? Try these, posted by Michael Geary on the jQuery discussion list:

function objectEach( obj, fn ) {
    for( var name in obj )
        if( fn( obj[name], name ) === false )
            break;
}

function arrayEach( ary, fn ) {
    for( var i = 0, n = ary.length;  i < n;  i++ )
        if( fn( ary[i], i ) === false )
            break;
}

He also posted examples how they work:

objectEach(
    { a:'ay', b:'bee', c:'see' },
    function( value, name ) {
        return confirm( name + ': ' + value );
    }
);

arrayEach(
    [ 'ay', 'bee', 'see' ],
    function( value, index ) {
        return confirm( index + ': ' + value );
    }
);

In each one you can cancel the iteration by clicking cancel on the confirm dialog.

For simple iterations that you'd like to stop at some point these are much better then jQuery's $.each (which is mostly for internal usage).

In that case, and lots of others, you need the form plugin.

Form plugin source (contains detailed documentation)
Documentation on Visual jQuery (Plugins/Form), though a bit outdated

Similar to the metadata plugin, it has evolved from the jQuery mailing list. A lot of people have worked on it and it is currently maintained by Mike Alsup.

The form plugin provides several methods to submit your form via AJAX. The easiest one is ajaxForm():

$("#myformid").ajaxForm();

This replaces the normal browser submit with an AJAX submit: It registers for the submit event of the form (allowing the user to use the submit button or plain keyboard events), serializes all input fields inside the form, uses the action property as the URL to send the form to and the method property for the method (GET or POST).

Though what we are missing here is a way to display the response. Again the easiest aproach is to provide an expression that selects an element where the response is displayed. May sound complicated at first, but it isn’t:

$("#myformid").ajaxForm({
  target: "#responseContainer"
});

Here we select an element with the id “responseContainer” to display the response.

Maybe this is a bit too simple: You’d want some validation before the submit, and do a few actions after the submit, using the response. You also need to send the form to a different URL, to be able to return JSON instead of a full HTML page. We pick a few of the available options, and throw them together:

function pre(formdata) {
  if( !formdata.length ) {
    alert("Please fill out the form");
    return false;
  }
}
function post(response) {
  if( response.status != "error" ) {
    $("#reponse").html(reponse.message);
  } else {
    alert("Your form submission was not succesful");
  }
}
$("#myformid").ajaxForm({
  beforeSubmit: pre,
  success: post,
  dataType: "json",
  url: "ajax.php"
});

The pre function checks if there are any succesful elements, in other words, if anything at least one field contains something to submit. The post function checks the JSON response, allowing a different handling of succesful and failed submits.

Both the pre and post function are passed to the ajaxForm method as options. The dataType option is the same as for $.ajax(), it’s just passed through. We set it to JSON because we want to work with the response as JSON (eg. access response.status).

We also define the URL to submit the form to. This makes it easier for the server-side to distinguish between a normal and an AJAX submit. The more elegant version would be to check for the “X-Requested-With” HTTP header on the server-side.

The form plugin also provides very useful methods when working with other aspects of forms. You can use clearForm() and resetForm() to clear and reset forms. Getting the actual value of certain form fields can be quite complicated, caused why certain browser-differences. fieldValue() takes the burden to lift this issue from you. It even returns the correct value for option elements with no value attribute specified, which can be quite tricky in IE.

Update:
Mike pointed out some minor issues and an update: before and after callbacks are deprecated in favor of beforeSubmit and success, and the validation must be for “!formdata.length”, I forgot the invertion. The explanation for ajaxForm was inaccurate, that is fixed, too. Updated above. Thanks Mike!

After a longer discussion about this matter on the jQuery mailing list, John Resig developed the initial version of the metadata plugin. Afterwards, Yehuda Katz wrote the first documentation and I improved both some more and wrote some tests.

Metadata plugin source (requires jQuery 1.0.4+, contains detailed documentation)
Metdata Testsuite
Documentation on Visual jQuery (Plugins/Metadata), though a bit outdated

The default usage is to put javascript objects inside the class attribute of your elements. Once the metadata plugin is loaded and you access an element, the plugin reads the data and provides it as a property on the element.

I’m using the plugin for the yet-to-be-released version of my validation plugin. You define an input that requires an email address to be entered with this code:

<input id="email" name="email" class="{email:true}" />

The validation plugin searches for all input elements inside the form that it validates and reads the metadata via the data() method:

data = $(element).data();

I highly recommend using the class attribute for metadata. As long as you put the data inside {}-brackets and avoid any spaces, you won’t produce any problems with stylesheets. And according to the HTML specification, the purpose of the class attribute is for both CSS classes and other data.