The Ajax theme is experimental. Feedback is appreciated.
The ajax div template provides a much more interesting div rendering option that the other themes do. Rather than simply rendering a
<div> tag, this template relies on advanced AJAX features provided by the Dojo Toolkit. While the div tag could be used outside of the ajax theme, it is usually not very useful. See the div tag for more information on what features are provided.
- Retrieve remote data
- Initialize the div with content before the remote data is retrieved
- Display appropriate error and loading messages
- Refresh data on a timed cycle
- Listen for events and refresh data
Retrieve Remote Data
The simplest way to use the div tag is to provide an href attribute. For example:
What this does after the HTML page is completely loaded, the specified URL will be retrieved asynchronously in the browser. The entire contents returned by that URL will be injected in to the div.
Initializing the Div
Because the remote data isn't loaded immediately, it is sometimes useful to have some placeholder content that exists before the remote data is retrieved. The content is essentially just the body of the div element. For example:
If you wish to load more complex initial data, you can use the action tag and the executeResult attribute:
Loading and Error Messages
If you'd like to display special messages when the data is being retrieved or when the data cannot be retrieved, you can use the errorText and loadingText attributes:
Another feature this div template provides is the ability to refresh data on a timed basis. Using the updateFreq and the delayattributes, you can specify how often the timer goes off and when the timer starts (times in milliseconds). For example, the following will update every minute after a two second delay:
Listening for Events
The a tag (specifically the ajax a template) and the div tag support an ajax event system, providing the ability to broadcast events to topics. You can specify the topics to listen to using a comma separated list in the listenTopics attribute. What this means is that when a topic is published, usually through the ajax a template, the URL specified in the href attribute will be re-requested.
What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that was selected. It will modify the URL for the div (adding the id so the correct data is obtained) and then bind() the AJAX div so it refreshes.