JavaScript, CSS, HTML Frameworks and Tools

Greg posted a very useful list of resources; One of the challenges in the world of HTML/JavaScript/CSS app development is cobbling together your kitchen sink of frameworks, tools and other technologies. When you start looking around, it feels like there is an endless list of options, which is good and bad!  Recently, I’ve been gathering a list of what’s popular these days and thought it might be useful for others to share. If you see anything obvious missing, please let me know.  Thanks to the following for helping me put together this list: Ray Camden, Andy Trice, Philip Wilson, Christophe Coenraets, Piotr Walczyszyn, and James Brown.

In no particular order:

via Gregs Ramblings.

Ajaxify Your Zend_Form Validation with jQuery

Jon Lebensold posts an update to his excellent screencast; We’re going to take what was put together in the last 3 videos and now include some server-side validation that will appear asynchronously. This is an example of using Zend_Form as a validation tool via JSON.

Grab a copy of the project or browse the repository.

UPDATE: as a couple people have mentioned, you can cut down your IndexController even more by using the Zend_Json view helper:

public function validateformAction()
{
$f = new Form_Registration();
$f->isValid($this->_getAllParams());
$this->_helper->json($f->getMessages());
}

Enjoy!

See it at Zendcasts.

DataTables – table plug-in for jQuery

The other day I had to write a  NOC application that shows all active phone lines in an out of a customers telecom cluster, thats a lot of constantly changing data that needed to be displayed.

Some design requirements was;

  • *NO* refreshes i.e. blinking screen parts (gives NOC personel an epileptic fit after a day staring at it).
  • No direct database access – read only Json proxy.
  • Near realtime – 1 second updates.
  • Group lines on customer. Toggle on and off.
  • Sortable on all visible columns.
  • Searchable and one click filters.
  • Has to work in an Dojo ContentPane.
  • 100% translatable

To the rescue; DataTables is a plug-in for the jQuery Javascript library.  It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

I can’t recommend it highly enough, configuration is as easy or as hard as you require it to be, draw up a file with a regular table,thead,tbody,tfoot table put it’s id to be example and place this code snippet into the file;
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});

Then popp over to Allans excellent Examples page! and if you dont have a sortable, searchable and great looking grid in about 5 minutes, I owe you a beer!
Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid – backed by a suite of 1300+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
  • It’s free!
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Extensive plug-in support
  • – Sorting, type detection, API functions, pagination and filtering
  • Fully themeable by CSS
  • Solid documentation
  • Full support for Adobe AIR

Go NOW and take a peek DataTables (table plug-in for jQuery).