THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<img style="display:none" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..."/>
|
Topics
Topics provide an easy way to listen to and publish events.
To listen to a topic:
| Code Block | ||||
|---|---|---|---|---|
| ||||
dojo.event.topic.subscribe("/refresh", function(param1, param2) {
//this function will be called everytime "/refresh" is published
});
|
To publish a topic:
| Code Block | ||||
|---|---|---|---|---|
| ||||
dojo.event.topic.publish("/refresh", "foo", "bar");
|
URL
The "href" attribute must contain a url built with the url tag.
...
The div tag is a content area that can load its content asynchronously. The div tag can be forced to reload its content using topics. To define the topics that will trigger the refresh of the panel, use the "listenTopics" attribute. This tag will load its content when the page is loaded, unless "autoStart" is set to "false".
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" listenTopics="/refresh0,/refresh1"/>
|
...
"/refresh0 |
...
| Code Block | ||
|---|---|---|
| Javascript | Javascript | dojo.event.topic.publish("/refresh0");,/refresh1"/> |
The div tag can be configured to update its content periodically, using a timer. Use the "updateFreq" attribute to set the interval for the timer; this value is expressed in milliseconds. If "autoStart" is set to true, "delay" can be used to cause the timer to wait for the delay period (in milliseconds also) before starting.
...
The submit tag can be used to update the content of its "targets" attribute with text returned from the asynchronous request. "targets" is a comma-delimited list of element ids. The "targets" attribute is optional.
Regular submit button that will update the content of div1:
...
The anchor tag, like the submit tag, can be used to update the content of its "targets" attribute with text returned from the asynchronous request. "targets" is a comma-delimited list of element ids. The "targets" attribute is optional.
This anchor will update the content of div1 and div2 with text returned form "/AjaxTest.action"
...
See the Div tag for examples on how to use "handler", "beforeLoading", "afterLoading", "loadingText" and "errorText""handler", "loadingText" and "errorText"
"notifyTopics" scenarios:
When | data | type | request |
|---|---|---|---|
Before request | empty javascript object | "before" | empty javascript object |
After successful request | html string | "load" | request javascript object |
After unsuccessful request | html string | "error" | request javascript object |
Attribute | Description | Type |
|---|---|---|
targets | Comma delimited list of ids of the elements whose content will be updated | String |
handler | Javascript function name that will make the request | String |
formId | Form id whose fields will be serialized and passed as parameters | String |
formFilter | Function name used to filter the fields of the form | String |
loadingText | The text to display in the "targets" while content is loaded | String |
errorText | The text to display in the "targets" when there is an error | String |
refreshListenTopic | Topic name that will cause the "targets" content to be reloaded | String |
executeScripts | Any Javascript code in the loaded content will be executedthe loaded content will be executed | Boolean |
preInvokeJS | Deprecated. Use "notifyTopics" instead | String |
afterLoading | Deprecated. Use "notifyTopics" instead | StringBoolean |
Tabbed Panel
The tabbedPanel tag can host static and dynamic(asynchronously loaded) tabs. Every div tag inside the tabbedPanel will be rendered as a tab. The "label" attribute is required for each tab, and will be used as caption. For more details on the dynamic tabs, see the "div" tag section. The tabbedPanel tag is in the "simple" theme bacause it does not contains any ajax functionality itself.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" />
<form id="selectForm">
Autocompleter 1 <s:autocompleter theme="simple" name="select" list="{'fruits','colors'}" onValueChangedPublishTopicnotifyTopics="/Refresh" />
</form>
Autocompleter 2 <s:autocompleter theme="ajax" href="%{json}" formId="selectForm" refreshListenTopic="/Refresh"/>
json}" formId="selectForm" listenTopics="/Refresh"/>
|
"notifyTopics" scenarios:
When | data | type | request |
|---|---|---|---|
Before request | empty javascript object | "before" | empty javascript object |
After successful request | html string | "load" | request javascript object |
After unsuccessful request | html string | "error" | request javascript object |
Value changed | new value | "valuechanged" | empty javascript object |
Attribute | Description | Type |
|---|---|---|
autoComplete | Whether to make suggestions on the textbox (suggestions in the dropdown will still be done) | Boolean |
forceValidOption | The text entered has to match an option, otherwise the value will be cleared when autocompleter loses focus | Boolean |
delay | Time to wait before making the search (in milliseconds) | Integer |
searchType | How to match entered text agains the available options, "startstring" (default), "startword" and "substring" | String |
dropdownHeight | The height of the dropdown (in pixels), by default 120 | Integer |
dropdownWidth | The width of the dropdown (in pixels), by default same as autocompleter's width | Integer |
formId | Form id whose fields will be serialized and passed as parameters | String |
formFilter | Function name used to filter the fields of the form | String |
refreshListenTopic | Topic name that will cause the options to be reloaded | String |
onValueChangedPublishTopic | Topic name to be published when the value changes | String |
value | Default value when "theme" is "simple" | String |
list | Iteratable source to populate options | String |