Netvibes Developers blog

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:

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 getJson method:

var searchTerm = widget.body
  .getElementsByClassName("searchTerm")[0].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.

While it could be enhanced by replacing its hard-coded tables and cells by div-tags mixed with UWA’s Thumbnailed List template, the simple fact that M. Surtell told us he is more accustomed to coding in VB.Net than JavaScript, and is still able to build a widget this nice, is to us a testament of the ease-of-use of both JavaScript and our UWA methods.

Tags: ajax, getjson, javascript, Showcase, uwa, widget

This entry was posted on Monday, December 17th, 2007 at 11:34 am and is filed under Articles, Showcase, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.