Update your widget’s content cleanly with Ajax
The Netvibes Ecosystem has its share of search widgets, mostly because they’re easy to build: make a test request in the original search site, write down the search URL, build it into a widget and make that widget open a new page with the search string neatly placed into the search URL.
This is nice, since easy+useful is nice. Yet, it has one pesky downside: it takes the user to a new page, rather than displaying the search result(s) in the widget. This is the whole point of Ajax: making the user experience seamless, by bringing the content into the page he is already in.
One recent widget manages to bring Ajax to its search in an elegant way: Maplin Catalog Search, by Tim Surtell. The way it works for the user is pretty straightforward:
…Wait for the results…
…Page through the results…
Behind the curtains, it’s still straightforward: being a Maplin affiliate for his Electronis in Meccano website, M. Sutrell had access to a data-feed of Maplin’s database. He only had to adapt that feed to output in JSON (thanks to an ASP script), and the hardest part was done. From there, the widget simply calls the ASP script with the
var searchTerm = widget.body .getElementsByClassName("searchTerm").value; UWA.Data.getJson('http://www.surtella.com/maplin.asp?' + searchTerm, Maplin.display);
The “Searching” animation has CSS display (
visibility: visible;) and hide it (
visibility: hidden;), and the JSON results are parsed through a loop into a table of results. The widget even uses the Pager control, for a more user-friendly parsing.