...
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. |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<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.action%{ajaxTest}" formId="form1"/> |
See the Div tag for examples on how to use "handler", "beforeLoading", "afterLoading", "loadingText" and "errorText"
...
Code Block | ||||
---|---|---|---|---|
| ||||
<div id="div1">Div 1</div> <div id="div2">Div 2</div> <s:aurl themeid="ajaxajaxTest" hrefvalue="/AjaxTest.action" targets="dev1,dev2">Update divs</s /> <s:a theme="ajax" href="%{ajaxTest}" targets="dev1,dev2">Update divs</s:a> |
See the Div tag for examples on how to use "handler", "beforeLoading", "afterLoading", "loadingText" and "errorText"
...
This tabbedPanel has one static, and one dynamic tab:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" /> <s:tabbedPanel> <s:div label="static"> This is an static content tab. </s:div> <s:div href="/AjaxTest.action%{ajaxTest}" theme="ajax" label="dynamic"> This is a dynamic content tab. The content of this div will be replaced with the text returned from "/AjaxTest.action" </s:div> </s:tabbedPanel> |
...
This tabbedPanel will place the tab labels on the left, with a "close" button on each tab, and will select the "dynamic" tab by default:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:tabbedPanelurl labelpositionid="leftajaxTest" closeButtonvalue="tab/AjaxTest.action" selectedTab="dynamic"/> <s:tabbedPanel labelposition="left" closeButton="tab" selectedTab="dynamic"> <s:div label="static" id="static"> This is an static content tab. </s:div> <s:div href="/AjaxTest.action%{ajaxTest}" theme="ajax" label="dynamic" id="dynamic"> This is a dynamic content tab. The content of this div will be replaced with the text returned from "/AjaxTest.action" </s:div> </s:tabbedPanel> |
...
This tabbedPanel's height is 300 px:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="ajaxTest" value="/AjaxTest.action" /> <s:tabbedPanel id="test2" theme="simple" cssStyle="height: 300px;" doLayout="true"> <s:div theme="ajax" id="left" label="left"> This is the left pane<br/> <s:form > <s:textfield name="tt" label="Test Text" /> <br/> <s:textfield name="tt2" label="Test Text2" /> </s:form> </s:div> <s:div theme="ajax" href="/AjaxTest.action%{ajaxTest}" id="ryh1" theme="ajax" label="remote one" /> </s:tabbedPanel> |
...
This is a simple autocompleter without textbox autocomplete:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" /> <s:autocompleter theme="ajax" href="/JSONList.action%{json}" autoComplete="false"/> |
This tag can be used in the "simple" theme, without ajax functionality. When using this tag in the "simple" theme, the option to be selected by default can be specified using the "value" attribute. Use the "list" attribute to specify the available options:
...
This autocompleter dropdown's height is 180 px:
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" /> <s:autocompleter theme="ajax" href="/JSONList.action%{json}" dropdownHeight="180"/> |
When the topic specified in the "refreshListenTopic" attribute is published, the options in the autocompleter will be reloaded. If the "onValueChangedPublishTopic" attribute is given a value, every time the selected value changes, a topic with that name will be published. This two attributes can be use to link two autocompleters. The "formId" and "formFilter" attributes (see Div tag for examples) can be used to submit a form, when the request is made.
When the selected value in "Autocompleter 1" changes, the "/Refresh" is published, forcing "Autocompleter 2", to reloads its options, submitting the form "selectForm":
Code Block | ||||
---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" /> <form id="selectForm"> <p>AutocompleterAutocompleter 1 <s:autocompleter theme="simple" name="select" list="{'fruits','colors'}" onValueChangedPublishTopic="/Refresh" /></p>> </form> Autocompleter 2 <s:autocompleter theme="ajax" href="/Autocompleter.action%{json}" formId="selectForm" refreshListenTopic="/Refresh"/> |
...