Versions Compared

Old Version 13

changes.mady.by.user Musachy Barroso

Saved on

compared with

New Version 14

changes.mady.by.user Musachy Barroso

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Example:

Code Block
HTML
HTML
  <s:url id="ajaxTest" value="/AjaxTest.action" />
  <s:div theme="ajax" href="%{ajaxTest}">
    Initial Content
  </s:div>
Warning
URL
URL

None of the ajax tags will work if their url (in the "href" attribute) is not built with the url tag.

...

Code Block
HTML
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.action%{ajaxTest}" formId="form1"/>

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

...

Code Block
HTML
HTML
<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
HTML
HTML
<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
HTML
HTML
<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
HTML
HTML

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

...