Recently I've had a few questions about how to use the datatables plugin to display data, and also integrate a pop up or lightbox function. The pop up would have an edit form in it, and when the user completes the edit the light box goes away and the datatable refreshes.

This is relatively straightforward to do, but there are several key concepts to getting everything working correctly, so I've broken it down into a few chunks.

[ More ]

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 ]

I was working on a system recently that allowed a user to upload images onto the server. It was restricted to files types of images, more specifically 'jpeg' and 'gif' files.

This is easily done with the 'accept' parameter, as documented in the ColdFusion documentation:

It is important to note here that it is the browser uses the file extension, so renaming an exe to jpg would fool it entirely.

Issues arise when you don't handle an invalid file upload in a friendly manner. In this case when a user tried to upload an incorrect file type they saw a nasty unformatted error message stating that the request could not be processed as the file was the wrong Mime type.

You cannot tell what the file type is until you attempt to upload it, so wrap your cffile tags in a simple try-catch and handle any errors in the same fashion as you normally would, I.E. by handling the system message and instead displaying a nice, user friendly message that doesn't sound like it was written by robots.