Just another Nodetraveller

Icon

Another blog about someone playing about with web development

Another LiveInfo fix

Andrew Gregory reported some bugs in Opera 7.54u2. The bug in Opera 7.54u2 turned out to be rather strange. Any opera browser below 7.6 uses an iframe and I check the html within the frame to see if it is loaded. I use the text </liveInfo> as that is the root node. In 7.54u2, there is no </liveInfo>, only <liveInfo/>. Strange. Anyway I introduced a check for that and it works okay now.

Andrew also reported a bug in Opera 8.0 beta 1but I couldn’t reproduce it. As usual, the updated zip is now available from the downloads section or you can download it direct.

I’m still looking for reports on usage on mac and linux browsers. Please take the time to comment below if you’re using a mac or linux and say if it works or not. Thanks…

LiveInfo Update

Just a minor update release on LiveInfo. Version 1.01 just tidies up some Javascript warnings that sometimes occur.

Introducing LiveInfo..

Directly evolved from liveSearch, is a updated version which I’m calling liveInfo. As can be seen at chregu’s blog LiveSearch displays live search results while a user enters the search text. You’ve probably seen Google Suggest which uses the same technology (XMLHTTPRequest).

One of the coolest things about liveSearch is the keyboard navigation where users, when the input field has the focus, the user can navigate through the results using the up and down keys on the keyboard. Because of the pageSet script I’ve done in the past I initally implemented paging functionality into the original liveSearch script including navigating through the pages with the left and right arrow keys.

I then thought about making it easier to implement something like this on various blogging and CMS systems. This led me to using XML to load config data. As a result, liveInfo has a skinnable, plug-in architecture and as its completely object oriented, more than one liveInfo element can be used on a page. The small PHP framework fully supports XMLRPC (using incutio’ XMLRPC library) and SOAP (using nusoap )webservices and should be easily portable to other languages for use in CMS or blogging systems written in that language.

I’ve also enabled it to work with opera 7+ as well as IE 5+ and Gecko based browsers. It should also work on Safari and other browsers though I haven’t been able to test this. Please report any problems and I’ll try and fix it. For browsers that support it, it uses document.importNode to display the data so it should also work on those documents that are true XHTML documents.

You can see it running on this blog. The wordpress search liveInfo element is a simple database based system, while the SynTV Search Listings LiveInfo element is a XMLRPC based service which retrieves search result from SynTV. The download comes with a demo page which also includes a Google the search element which uses Google SOAP API.

The complete feature set can be seen in the following list.

  • Support for more browsers
    • Internet Explorer 5+ (Win)
    • Gecko based browsers
    • Opera 7+
    • Should work with IE Mac, Konqueror etc. Needs testing
  • Multiple LiveInfo elements on one page
  • Pageable results (Keyboard navigation via left, right, up and down keys)
  • Support for forms with multiple elements
  • Cacheable Results
  • Dynamic forms
  • Skinnable Results
  • Plugin support (services)
  • Webservices support (via plugins)

I’ve also put up a page describing how liveInfo works but in short all a plugin writer has to do is write a class extending the liveInfo class or subclass and implement two methods. Then write an XML file denoting config values, cache time, form HTML and results HTML . If needed, the writer can provide a css file too. All the user has to do is extract the plugin into the plugins directory and add a few lines in their page.

Technorati Tags: | |

LiveInfo - How it works

LiveInfo is directly evolved from Livesearch. If you don’t know what liveSearch is, liveSearch allowed users to search a website while still viewing the current page. The original can be seen here. Wanting to make use of liveSearch for one of my own projects, I proceeded to make some changes from which evolved LiveInfo. LiveInfo is a framework for multiple, real time, skinnable updatable elements within a web page. You can see LiveInfo in action on my blog where there are two LiveInfo elements. One is the blog search and the other is the UK TV listings (SynTV) search on the side.

From the client side, LiveInfo improves upon the original in the following areas

  • Support for more browsers
    • Internet Explorer 5+ (Win)
    • Gecko based browsers
    • Opera 7+
    • Should work with IE Mac, Konqueror etc. Needs testing
  • Multiple LiveInfo elements on one page
  • Pageable results (Keyboard navigation via left, right, up and down keys)
  • Support for multiple element forms

Utilising a small backend framework, LiveInfo also provides the following functionality

  • Cacheable Results
  • Dynamic forms
  • Skinnable Results
  • Plugin support (services)
  • Webservices support (via plugins)

LiveInfo comes with four services. These are as follows:

  • Wordpress search - Searches a wordpress blog
  • Google Search - A simple Google search. Uses Googles SOAP API.
  • SynTV Search - Search UK TV listings using the syntv.com XMLRPC webservice
  • SynTV Listings - Displays UK TV listings using the syntv.com XMLRPC webservice

The latest version of liveInfo can be found on my downloads page.

Installation

Extract the zip and upload the liveInfo directory to your server. I recommend uploading it to the root directory. Wherever you upload it, edit the liveInfoDir node in the liveInfo/liveInfo.xml file to point to it. The value should be a relative path and must not have an ending /. Any new services should be copied into the services directory and any css files into the css directory. Lastly make sure the cache directory is writable. You’ll need to edit the xml file for each service to suit your install but instructions are given

How it works

When a user interacts with a form, using either the XMLHttpRequest object or an iframe depending on browser capability, a request is made to the server.
Whatever the results the server returns some XML from which the relevant elements are extracted and displayed.

The xml document that is returned by the server is actually an XML document with a html namespace. The reason for this is that the normal method of using innerHTML to rewrite elements won' work on some browsers that support true XHTML documents (xml files sent with the correct application/xhtml+xml header). The workaround for this is to use the document.importNode method to import nodes from one document into another. Note this compatibilty with true XHTML documents was one of the last features to be put in and hasn’t yet been tested fully on true XHTML documents. I will update when I test more fully.