Struts 2 provides a set of tags to help you ajaxify your applications, most of them inherited from Webwork, and based on Dojo. Dojo 0.4 is included in Struts 2.
Note | ||
---|---|---|
| ||
To use these ajax tags you need to set the "theme" attribute to "ajax". |
Common Attributes
These attributes are common to all the ajax tags:
Attribute | Description | Type |
---|---|---|
href | url used to make the request | String |
beforeLoading | Javascript code which will be executed before the request is made | String |
afterLoading | Javascript code which will be executed after the request is made | String |
URL
The "href" attribute must contain a url built with the url tag.
Example:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}">
Initial Content
</s:div>
|
Warning | ||||
---|---|---|---|---|
| ||||
None of the ajax tags will work if their url (in the "href" attribute) is not built with the url tag. |
Div
The div tag is a content area that can load its content asynchronously. The div tag can be forced to reload its content using a topic. To define the topic that will trigger the refresh of the panel, use the "refreshListenTopic" attribute. This tag will load its content when the page is loaded, unless "autoStart" is set to "false".
This div will refresh every time the topic "/refresh" is published:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" refreshListenTopic="/refresh"/>
|
To publish this topic, use this in your Javascript code:
Code Block | ||||
---|---|---|---|---|
| ||||
dojo.event.topic.publish("/refresh");
|
The div tag can be configured to update its content periodically, using a timer. Use the "updateInterval" 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.
This div will refresh periodically, every 2 seconds, starting 3 seconds after the page is loaded:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" updateInterval="2000" delay="3000"/>
|
The "autoStart" attribute controls whether the timer will be started when the page is loaded; its value is "true" by default. The timer can be started and stopped using the topics "startTimerListenTopic" and "stopTimerListenTopic".
This div will not start the timer by default and will listen to the start/stop topics to control the timer:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" startTimerListenTopic="/startTimer" stopTimerListenTopic="/stopTimer" updateInterval="3000" autoStart="false"/>
|
The div panel shows "Loading..." by default when the request is in process. To customize this text, use the "loadingText" attribute. If an error of any sort occurs, the error will be shown in the div area; to customize the error message, use the "errorText" attribute.
This div uses custom error/loading messages:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div href="%{ajaxTest}" theme="ajax" errorText="There was an error" loadingText="reloading" updateInterval="5000"/>
|
If the loaded content contains Javascript code sections, these sections will be executed if the "executeScripts" attribute is set to true.
If parameters need to be passed to the url, the "formId" attribute can be used to specify a form whose fields will be serialized and passed in the request as parameters. The attribute "formFilter" can bet set to the name of a Javascript function that will be used to filter the fields of "formId". The "formFilter" function will be called for each field, passing the field's DOM node as a parameter, and must return true if the field is to be included, or false otherwise.
This div will submit the field "firstName" of the form "userData" and ignore other fields:
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript">
function filter(field) {
return field.name == "firstName";
}
</script>
<form id="userData">
<label for="firstName">First Name</label>
<input type="textbox" id="firstName" name="firstName">
<label for="lastName">Last Name</label>
<input type="textbox" id="lastName" name="lastName">
</form>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div href="%{ajaxTest}" theme="ajax" formId="userData" formFilter="filter"/>
|
If the attribute "handler" is set, the Javascript function specified by its value will be called, instead of making the request. Use the "handler" function when you want to handle the request yourself.
This div will not make any request, and will just call the function "handler". The first parameter of the function is the Dojo widget for the div, and the second the DOM node for the div.
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript">
function handler(widget, node) {
alert('I will handle this myself!');
node.innerHTML = "Done";
}
</script>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" handler="handler"/>
|
Attribute | Description | Type |
---|---|---|
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 div while content is loaded | String |
errorText | The text to display in the div when there is an error | String |
refreshListenTopic | Topic name that will cause the div content to be reloaded | String |
startTimerListenTopic | Topic name that will start the timer | String |
stopTimerListenTopic | Topic name that will stop the timer | String |
executeScripts | Any Javascript code in the loaded content will be executed | Boolean |
updateInterval | Time between requests (in milliseconds) | Integer |
delay | Time to wait before making the first request (in milliseconds) | Integer |
autoStart | Start timer automatically when page loads | Boolean |
Submit
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.
Regular submit button that will update the content of div1:
Code Block | ||||
---|---|---|---|---|
| ||||
<div id="div1">Div 1</div>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:submit type="submit" theme="ajax" value="submit" targets="div1" href="%{ajaxTest}"/>
|
Submit button using an image:
Code Block | ||||
---|---|---|---|---|
| ||||
<div id="div1">Div 1</div>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:submit type="image" theme="ajax" label="Alt Text" targets="div1" src="${pageContext.request.contextPath}/images/struts-rocks.gif" href="%{ajaxTest}"/>
|
If the submit button is used inside a form, the form will be submitted asynchronously:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:form id="form" action="AjaxTest">
<input type="textbox" name="data">
<s:submit type="button" theme="ajax" label="Update Content"/>
</s:form>
|
A submit button can be used to submit a form, even if it is outside the form, using "formId" and "formFilter" and "href". Note that in this case "href" is required.
Code Block | ||||
---|---|---|---|---|
| ||||
Code Block | ||||
A submit button can be used to submit a form, even if it is outside the form, using "formId" and "formFilter" and "href". Note that in this case "href" is required.
{code:HTML}
<s:form id="form1">
<input type="textbox" name="data">
</s:form>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:submit type="submit" theme="ajax" href="%{ajaxTest}" formId="form1"/>
|
...