Ajax Tags

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"/>	

See the Div tag for examples on how to use "handler", "beforeLoading", "afterLoading", "loadingText" and "errorText"

Anchor

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.

This anchor will update the content of div1 and div2 with text returned form "/AjaxTest.action"

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

<s:url id="ajaxTest" value="/AjaxTest.action" />

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

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.

This tabbedPanel has one static, and one dynamic tab:

<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}" 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>  

Use the "labelposition" attribute to specify the side where the tab labels must be placed, possible values are "top" (default), "right", "bottom" and "left". Tabs can have a "close button" which will remove the tab from its tabbedPanel parent. The "close button" is hidden by default, to make it visible set the "closeButton" attribute to either "panel" (it will be placed on the tabbedPanel), or "tab" (it will be placed on each tab). By default the first tab will be selected, using the "selectedTab" attribute, you can specify the id of the tab to be selected when the page loads.

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:

<s:url id="ajaxTest" value="/AjaxTest.action" />

<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}" 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>  

TabbedPanel's height will be by default the same as the currently selected tab, use the "doLayout" attribute to force a fixed height.

This tabbedPanel's height is 300 px:

<s:url id="ajaxTest" value="/AjaxTest.action" />

<s:tabbedPanel id="test2" theme="simple" cssStyle="height: 300px;" doLayout="true">
  <s:div 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}" id="ryh1" label="remote one" />
</s:tabbedPanel>

Autocompleter

The autocompleter tag loads its options asynchronously when the page loads, and suggests options based on the text entered in the textbox. If the attribute "autoComplete" is set to "true" (defaults to false), the autocompleter will make suggestions in the textbox, as the user types. The autocompleter will always display a dropdown with the options that have at least a partial match with the text entered in the textbox. If the user clicks on the dropdown button, all the options will be shown in the dropdown. To force the value to be a valid option set the attribute "forceValidOption" to "true" ("false" by default).

This is a simple autocompleter without textbox autocomplete:

<s:url id="json" value="/JSONList.action" />

<s:autocompleter theme="ajax" href="%{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:

<s:autocompleter theme="simple" list="{'apple','banana','grape','pear'}" value="grape"/>

By default the dropdown's height is 120 px, if the list contains just a few items and is smaller than 120 px, the dropdown's height will be adjusted to the size of the list. To change the default value for the dropdown's height use the "dropdownHeight" attribute.

This autocompleter dropdown's height is 180 px:

<s:url id="json" value="/JSONList.action" />

<s:autocompleter theme="ajax" href="%{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":

<s:url id="json" value="/JSONList.action" />

<form id="selectForm">
  Autocompleter 1 <s:autocompleter theme="simple" name="select" list="{'fruits','colors'}"  onValueChangedPublishTopic="/Refresh" />
</form>
  Autocompleter 2 <s:autocompleter theme="ajax" href="%{json}" formId="selectForm" refreshListenTopic="/Refresh"/>