Last week, I spotted a really nice blog post from Mike Oryszak which showed how to update an item without a form by using jQuery to post changes using the SharePoint Lists Web Service. It got me thinking about a lot of things that you might do to make SharePoint feel more “Web 2.0”. By using jQuery, you can quickly add functionality to your pages, and in this case, even use its AJAX capabilities to talk to Web Services.
I’ve created a new demo page on the Sympraxis Consulting demo site which ought to give you an idea of some of the possibilities. The page shows how you can use SharePoint’s Lists Web Service and jQuery to update items in real time, without a roundtrip to the server.
Each row in the Data View Web part has buttons which allow you to increase/decrease the Potential Value column by either $1 or $10. On each button click, there is a SOAP call to the Lists Web Service (_vti_bin/Lists.asmx, UpdateListItems operation) which updates the item. The jQuery code then updates the value on the page and changes the fontStyle to italic.
After some DMs back and forth with Mike, at his suggestion (and for extra fun), we used the Tablesorter 2.0 jQuery library so that the table re-sorts after each Potential Value change. A bonus effect of this is that the column headers are sortable as well. The CSS styling on the headers shows this.
A known issue (which we chose not to deal with here) is that concurrent changes will write over each other. There is no checking for these conditions, though they could be managed fairly easily.
Take a look and let me know what you think!