Description

{snippet:id=javadoc|javadoc=true|url=comorg.opensymphonyapache.webworkstruts2.components.Div}

Parameters

{snippet:id=tagattributes|javadoc=false|url=webwork/docs/struts2-tags/Div.html}

Usage

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:

    <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:

 <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.

<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:

remotediv1.start();

To stop refreshing use the javascript:

remotediv1.stop();

To refresh the content use the javascript:

remotediv1.bind();
div.html}