You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

div

Attribute

Type

Required

Default

Description

id

string

TRUE

 

The id to assign the DIV

name

string

TRUE

 

 

value

string

FALSE

 

 

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

required

boolean

FALSE

 

 

disabled

boolean

FALSE

 

 

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:

    <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();
  • No labels