The datatables JQuery plugin ( http://www.datatables.net/ ) is an incredibly powerful way of displaying tabular data and allowing the user to manipulate it without leaving the current view.

The plugin already features paging and sorting, but what if you want to extend the plugin with some other non default behaviours like drag and drop? Using a previous example ( http://www.mccran.co.uk/index.cfm/2010/4/29/JQuery-Datatables-plugin-example-using-a-server-side-data-request-coldfusion ) as a starting point I thought I'd try and integrate drag and drop with the datatable object.

[ More ]

It comes with quite a few pre defined validation methods (you can see them here: http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods), but what if one of your fields requires a bespoke validation type, for example matching the first N characters of a string.

Well its pretty easy to do, you just have to plan your new rule, and programatically add it to the plugin. In the example below I am going to match the string '123456' and check it as a rule, alongside the existing rules.

I'm assuming you have already imported the JQuery library and Validation plugin. Next we use the addMethod() function of the Validation plugin to add a new custom method. This accepts a few different arguments, as detailed below:

Name (String)
The name of the method, used to identify and referencing it, must be a valid javascript identifier

Method (Callback)
The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.

Message (string / function)
The default message to display for this method. Can be a function created by jQuery.validator.format(value). When undefined, an already existing message is used (handy for localization), otherwise the field-specific messages have to be defined.

As an example I have created a new rule called 'pattern-match', this rule will check if the passed in element is required 'this.optional(element)' OR if the first six characters match the designated pattern, in this case '123456'.

This code creates the new validation method, now we can reference it in our validate() method just like all the pre existing methods.

Just add it in with the other methods, and specify the the error message that goes with it.

The addMethod() function will take any form of custom validation that you can write in standard JavaScript, so it should be possible to accommodate any bizarre rules you might want to come up with.

I needed to have the parent page change when the user had performed an action within the pop up. But how to do this?

FancyBox (http://fancybox.net/) has a 'onClosed' option to allow you to embed a function call whenever the user closes the lightbox.

The format of this is a little tricky, so here is an example:

You can build any function you want in this call, it is normal JavaScript after all, if you just wanted to reload the page you could have a refresh function:

This seems to work for any method of closing the Fancybox as well, so it will always fire.