Recently, I had the pleasure of being able to work with implementing a piece of our UI in a new and fundamentally different way than in previous approaches, and I thought it would be an interesting and informative lesson to share, especially for folks looking to do the same. As I continue here on this blog with a summary, please note that the full content/example with more detailed information can be found here on my personal blog.
Initially, we had some content pages where the user had the ability to search for a person or an organization (both by name), and they are presented with a list of names that would pop up from a normal jQuery UI auto completer. The user could then select one and they could see the rest of the information to verify it was correct (info appeared in a pop up) -- they had to go back and try again if it wasn’t. This isn’t a pleasant experience when you’ve got, say, 3 John Smiths that come up when you search for that name--you’ve got to go through each person and say yes or no and if it’s the third then you’ve had to repeat this three times (and assume/hope the order remains the same each time). I wanted to implement a better view with the same functionality, but unfortunately the jQuery UI Autocomplete does not allow me to return a JSON (JavaScript Object Notation) object and forward that data onto a callback function to do with as I please, only a string value / key:value pair and no data forwarding. So, I decided to make my own UI control and I would like to show you how to do the same. Please feel free to give some alternate suggestions in the comments below, as I’m sure it can be improved.
For those that don't know, JQuery is a JavaScript utility library that adds loads of functionality for easy DOM manipulation and AJAX, among other things. Now, I believe one of the reasons why jQuery was chosen here was that there are a helpful set of Struts 2 tag libraries that will assist in removing a good deal of the JavaScript writing to help keep your JSP cleaner. These provide access to creating some easy AJAX components like the Autocompleter from the jQuery UI library. The problem with the jQuery Autocompleter is that it is extremely one sided--you can get data from a local source or a remote source but it can only be either a list of values or a map of keys to values (strings) and will only display in a list format. That’s all well and good for some things, but sometimes you want a bit more oomph to display more information as you search. In our situation, the ability to display more information than just a name was one thing that would be helpful. Another was that we might like to add some additional operations that might be performed on the various search results.
DataTables is a JQuery Table creation / enhancement plugin that started a few years back. We used to use Trirand JQuery Grid plugin but moved away when we found that it was not Section 508 compliant due to how it handles a lot of the "fancier" functionality. DataTables provided a clean entry point and very minor tomfoolery with the necessary HTML to allow for a much nicer 508 result. We were on the fence initially due to a previous requirement that the data used must be an array of arrays, but with the 1.8 release that went away, and you can use JS objects as input instead, making this a very powerful and easy-to-use Table technology.
Another primary reason for doing this (which is not shown in the example), is that we wanted the data that is shown to be populated via a back-end search mechanism. So in our circumstances, our filter function is actually posting a request to a server and retrieving a JSON result set. As was pointed out to me regarding the example, this example could easily have also be accomplished by adding all the sample data to the table and using the DataTable filter box.
To continue reading/see the full content, please head over to my blog, Caffeinated Coding.
-Adam Swift, 5AM Solutions
