Databinding with jQuery

I guess the title of this blog should be "Writing a new jQuery plug-in every week" - that's all I seem to be doing right now - but I keep finding functionality that isn't available as a plug-in, or has just been plain poorly implemented.

I'm using jQuery UI for a web project right now, and currently it's missing the ability to turn an html table into a grid styled using the UI css. Now there are some good lightweight plug-ins out there, such as tablesorter and I didnt want to reinvent the wheel. Nor did I want to use a heavy wieght plugin such as jqGrid that is impressive but tries to do too much, especially when what you're really only after is a styled table.

To this end, I'm currently workign on the TableGrid plug-in, that uses the guidelines set out by the jQuery UI development team on how to style tables, whilst incorporating the work done by other developers to enable scrolling, paging, sorting etc. (Example1, Example2)

Which brings me to the subject of this post. I didn't agree with the mechanism used in other grid plug-ins where the data retrieval element is included inside the plug-in, to load data via ajax or some other method. What if I also wanted to load data into say my form?

Following my approach of a super plug-in above, I realised I would first need a data binding plug-in so that developers could load table data on-the-fly. A quick look confirmed there was nothing out there that could be used.

The databind plug-in

View examples and download.

Use the databind plug-in to bind a json object to any html element that has text, is an input or is a table/tbody. Each key (property name) is matched to the id of an element within the target of the databind function. The inner text can be used, or the value of an input element - the plug-in is smart enough to decide. Pass array or a collection of objects to the plug-in to bind rows of data to a table or table body.

UpdatePanel plug-in 1.0.0 released.

In a previous post, I introduced a plug-in that makes it simple for developers to integrate jQuery function calls with Microsoft Ajax UpdatePanels. The final version has been released today to both http://plugins.jquery.com and http://www.codeplex.com.

Functions

• .panelCreated(fn) - called when the UpdatePanel is created on a page
• .panelUpdated(fn) - called when the panel is updated during a asynchronous (ajax) postback.
• .panelReady(fn) - called when the UpdatePanel is first created or updated.
• .beginRequest(fn) - called before the processing of an asynchronous postback starts and the postback request is sent to the server.
• .initializeRequest(fn) - called during the initialization of the asynchronous postback. Allows the cancellation of the request.

The download includes the script file and a simple example.