...
Wiki Markup |
---|
{snippet:id=tagattributes|javadoc=false|url=webwork/docs/tags/Div.html} |
Usage
...
To get started, use the head tag and the ajax theme. See ajax head template for more information.
...
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:
Code Block |
---|
<ww:div href="/listPeople.action" theme="ajax" errorText="error opps"
loadingText="loading..." id="cart-body" >
<ww:action namespace="" name="listPeople" executeResult="true" />
</ww:div>
|
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.
Code Block |
---|
<ww:div
id="three"
cssStyle="border: 1px solid yellow;"
href="/ShowThankYouEmail.action"
theme="ajax"
listenTopics="user_downloads_webwork, user_loves_webwork"
delay="1000">Initial Content</ww:div>
<ww:a
id="link1"
theme="ajax"
href="/DownloadWebWork.action"
notifyTopics="user_downloads_webwork, the_world_is_a_better_place"
errorText="An Error ocurred">Download</ww:a>
|
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":
To start refreshing use the javascript:
Code Block |
---|
remotediv1.start();
|
To stop refreshing use the javascript:
Code Block |
---|
remotediv1.stop();
|
To refresh the content use the javascript:
...
Then look at the usage details for the ajax div template.