THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
Description
| Wiki Markup |
|---|
{snippet:id=javadoc|javadoc=true|url=com.opensymphony.webwork.components.Div} |
Parameters
| Wiki Markup |
|---|
{snippet:id=tagattributes|javadoc=false|url=webwork/docs/tags/Div.html} |
Usage
...
| Note |
|---|
Be sure to setup the page containing this tag to be Configured for AJAX |
...
Attribute
...
Type
...
Required
...
Default
...
Description
...
id
...
string
...
TRUE
...
...
The id to assign the DIV
...
name
...
string
...
FALSE
...
...
The name to assign the DIV
...
href
...
string
...
TRUE
...
...
The URL to call to obtain the content
...
delay
...
boolean
...
FALSE
...
...
How long to wait before fetching the content (in milliseconds)
...
updateFreq
...
boolean
...
FALSE
...
...
How often to re-fetch the content (in milliseconds)
...
loadingText
...
boolean
...
FALSE
...
...
The text to display to the user while the new content is being fetched (especially good if the content will take awhile)
...
errorText
...
boolean
...
FALSE
...
...
The text to display to the user if the is an error fetching the content
...
showErrorTransportText
...
boolean
...
FALSE
...
...
true/false - when to show the error message as content when the URL had problems
...
listenTopics
...
boolean
...
FALSE
...
...
Topic name to listen to (comma delimited), that will cause the DIV's content to be re-fetched
...
afterLoading
...
boolean
...
FALSE
...
...
Javascript code that will be executed after the content has been fetched
...
theme
...
string
...
FALSE
...
...
This tag will usually use the ajax theme
...
template
...
string
...
FALSE
...
...
...
cssClass
...
string
...
FALSE
...
...
...
cssStyle
...
string
...
FALSE
...
...
...
label
...
string
...
FALSE
...
...
...
labelposition
...
string
...
FALSE
...
...
...
tabindex
...
string
...
FALSE
...
...
...
onclick
...
string
...
FALSE
...
...
...
ondblclick
...
string
...
FALSE
...
...
...
onmousedown
...
string
...
FALSE
...
...
...
onmouseup
...
string
...
FALSE
...
...
...
onmouseover
...
string
...
FALSE
...
...
...
onmousemove
...
string
...
FALSE
...
...
...
onmouseout
...
string
...
FALSE
...
...
...
onfocus
...
string
...
FALSE
...
...
...
onblur
...
string
...
FALSE
...
...
...
onkeypress
...
string
...
FALSE
...
...
...
onkeydown
...
string
...
FALSE
...
...
...
onselect
...
string
...
FALSE
...
...
...
onchange
...
string
...
FALSE
...
...
Basic Functions
The remote DIV is handy for a few basic use cases.
Get remote data and refresh
First in its simplest form as mentioned above, it can load load its contents from a remote div. Additionally it can refresh them periodically. So... whats that do for you? Well say for example want to show the latest weather from weather.com on your page and update it every 1 minutes. You could do this like this:
| Code Block |
|---|
<ww:div
id="weather"
cssStyle="border: 1px solid yellow;"
href="http://www.weather.com/address_to_feed"
theme="ajax"
delay="2000"
updateFreq="60000"
errorText="There was an error"
loadingText="loading...">Initial Content
</ww:div>
|
Initialize div with remote data
OK that was fun, but lets say that you want to initially load the data from a remote page then refresh it. This example contrasts to the above example in that the initial data is NOT just 'Initial Content'.
Here is how you can do that:
...
Just stick an action in the body... that will be the initial data
Be a listener for data
Perhaps the coolest aspect of the remote div is its ability to be a listener in a pub-sub model. Wow you say... HTML pages dont have a pub-sub model. That used to be true but... WebWork has turned that notion upside down... read about our rich Decouped Components via Pub and Sub. So.... back to the example... the div can listen to topics in a pub sub model... did we mention how cool that is yet? Just use the listenTopics attibute to specify one or more topics(comma delimted) that this div should listen for to trigger a refresh.
...
See how the ww:a and the ww:div are loosely coupled via a pub-sub model??? When users click on the hyperlink called Download, the WebWork anchor publishes a message to two topics, one called user_downloads_webwork and the other called the_world_is_a_better_place. Our div listens to the first topic as well as a topic called user_loves_webwork. So using this model... anytime a user downloads webwork... or a user loves webwork... our website will personally thank them!!! Did I mention how cool this is?
Additional Functions
There are also javascript functions to refresh the content, stop and start the refreshing of the component. For the remote div with the component id "remotediv1":
...