Just another Nodetraveller

Javascript

The javascript for LiveInfo is object-oriented. The liveInfo object is responsible for extracting the form details, showing and navigating through the results. The liveInfo object utilises the xmlClient object which is responsible for contacting the server and returning the results to the liveInfo object.

The XMLClient object

For browsers that can make use of the XMLHttpRequest object, the xmlClient simply instantiates the XMLHttpRequest object and sends the request through. For those browers that don' have have XMLHttpRequest capability, it uses iframes. Unfortunately, its not easy to detect when a page has finished loading within an iframe so we check for a close tag for a specifed tagName which we call a closureNode (also the root node). When we encounter this, we extract and return the results.

The LiveInfo Object

The LiveInfo object is really quite customisable. There a few other elements besides the actual results to display. There is a title element, a status element to display information, the page controls and other UI elements. The methods available to customise different aspects of the liveInfo page element.

The constructor for the object takes four parameters. The first is the url for the liveinfo.php. The second and third are the service name and operation name respectively. The last parameter is the name or id of the nominated form element that is to trigger the liveInfo display. There can be more than one element that triggers liveInfo but only one can be the nominated element. The nominated element is also checked for text input if it is an text field or that a choice is selected if a select element.

The status text that is displayed on various events (search, error, progress,result) is fully customisable and is based on using a token within a string which is replaced with the required value. This allows a degree of support for other languages. The default token is "?" but this can be changed with the setStatementToken method. There are four statements and these can be changed via the setSearchStatement, setErrorStatement, setProgressStatement and setResultStatement methods.

Like the original, the results are navigable via the keyboard but this can be turned of via the setActivateKeys method.

The amount of time (in secs) the results are shown before automatically disappearing can be changed from the default of 5 seconds using the setDisplayTimeout method.

Debugging can be turned on or off via the setDebug method

When a user hits the return key, the form defaults to submitting the form to the required page. This behaviour can be turned off with the setSubmit method.

We can also add a custom method that is called whenever the liveInfo is triggered but before the request is sent. An example of why we might want to do this is to sent the field of a hidden value to something depending on the value of others form elements. To add this custom method we use the addOnTriggerMethod which takes a function as a parameter.

The default validation method in liveInfo simply checks that text is entered in text field elements and that at least one option is selected for select elements. You can replace this with a custom validation method using the replaceValidateMethod method. Like addOnTriggerMethod, this takes a function as a parameter.

Examples of calling these methods can be seen below