THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| Warning | ||||
|---|---|---|---|---|
| ||||
None of the ajax tags will work if their url (in the "href" attribute) is not built with the url tag. |
Returning pages with AJAX Tags
Ajax tags can be used inside content returned from an asynchronous request, just like in regular pages.
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 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:form id="form" action="AjaxTest"> <input type="textbox" name="data"> <s:submit type="button" theme="ajax" label="Update Content"/> </s:form> |
| Warning | ||
|---|---|---|
| ||
If the submit tag is inside a form, the "onsubmit" event of the form will be canceled. |
A submit button can be used to submit a form, even if it is outside the form, using "formId", "formFilter" and "href". Note that in this case "href" is required.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<s:form id="form" action="AjaxTest"> <input type="textbox" name="data"> <s:a theme="ajax">Submit form</s:a> </s:form> | ||||
| Warning | ||||
|
Using the anchor tag
...
to submit a form:
| Code Block |
|---|
Using the anchor tag to submit a form:
| Code Block | |||
|---|---|---|---|
| |||
<s:form id="form1">
<input type="textbox" name="data">
</s:form>
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:a theme="ajax" href="%{ajaxTest}" formId="form1">Submit form</s:a>
|
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" />
<form id="selectForm">
Autocompleter 1 <s:autocompleter theme="simple" name="select" list="{'fruits','colors'}" notifyTopics="/Refresh" />
</form>
Autocompleter 2 <s:autocompleter theme="ajax" href="%{json}" formId="selectForm" listenTopics="/Refresh"/>
|
"notifyTopics" scenarios:
By default the autocompleter tag loads its options once, and makes suggestions based on those options. This is not the best approach if the action returns many options. The autocompleter tag can reload its options every time the user types in the textbox, setting "loadOnTextChange" to "true" ("false" by default). If "loadOnTextChange" is set to "true" the available options will be reloaded after the user types 3 characters (default), to specify the minimum number of characters, use "loadMinimumCount". On this case, it is probably desired to hide the dropdown arrow, setting "showDownArrow" to "false".
This autocompleter reloads its content everytime the user types into the textbox, and the text lenght is greater than or equal to 4:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<s:url id="json" value="/JSONList.action" />
<s:autocompleter theme="ajax" href="%{jsonList}" loadOnTextChange="true" loadMinimumCount="4" showDownArrow="false"/>
|
"notifyTopics" scenarios:
When | data | type | request |
|---|---|---|---|
Before request | autocompleter's id, or Dojo widget id for this element if the autocompleter's id | ||
When | data | type | request |
Before request | autocompleter's id, or Dojo widget id for this element if the autocompleter's id was not provided | "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 |
value | Default value when "theme" is "simple" | String |
list | Iteratable source to populate options | String |
loadOnTextChange | Reload options as user types | Boolean |
loadMinimumCount | Text lenght that will trigger a reload of the options if "loadOnTextChange" is set to "true", 3 by default | Integer |
showDownArrow | Show or hide the dropdown arrow, "true" by default | Boolean |