AjaxEventSubmit
Generates a javascript function that submits the containing form using an Ajax request. Can be connected to the component using Dojo's event system and the 'eventListener' contribution to standard components.
This component is generally used when implementing javascript events on form components, such as onchange handlers in a component. Check the demo or the example below to see how.
This component will not work with the standard Radio/RadioGroup Tapestry components. You have to use the tacos version of Radio/RadioGroup if you want this to work on radio fields. They are an exact dupe so it shouldn't be very hard to switch.
This is because the RadioGroup components nests the Radio components and doesn't actually give them unique id values, thus making any javascript listening impossible. This will be fixed in Tapestry soon.
See also: Submit , InvokeListener , quircksmode.org , Live Demo
Parameters
Name | Type | Direction | Required | Default | Description |
---|---|---|---|---|---|
listener | IActionListener | in | no | A listener that is notified if this component is triggered. | |
action | IActionListener | in | no | A listener that is notified if this component is triggered just before the form's listener, after all components enclosed by the Form have had a chance to update their properties. | |
updateComponents | List (or comma-delimited String) | in | no | List of component id strings to refresh after invoking listener. This causes the contents of any html element on the page with a matching id in this list to be replaced, if the specified element is rendered in the return response. | |
effects | String | in | no | Specifies a list of effects to be applied to the returned response. Read the Effects-Popups page of the UserGuide for more details. | |
preEffects | String | in | no | The same with effects parameter, but specifies effects that should be performed on parts before triggering the ajax request. Read the Effects-Popups page of the UserGuide for more details. | |
popup | String | in | no |
If specified, the updated content will be shown in a floating pane. Read the Effects-Popups page of the UserGuide for more details. |
|
updateObject | String | in | no | If specified, the string passed in will be used to build a javascript statement which will call updateObject.ajaxUpdate(element, responseElement, elementId) / updateObject.beforeAjaxUpdate(responseElements) / updateObject.responseComplete(responseElements) | |
statusElement | String | in | no | If specified, the html element on your page with a matching id to this parameter will be temporarily displayed for a few seconds with status text set on the AjaxWebRequest via addStatusResponse(String). | |
focusElement | String | in | no | If specified, the html element on your page to focus after the ajax request. | |
direct | boolean | in | no | false | Specifies whether or not components should be invoked directly. This will cause the engine service to only call renderComponent on the targeted components of this request, whereas normal behaviour is to render the whole page and only return the portions of the response that were requested. Use at your own risk, components contained by lists, like Foreach and For will likely not be directly updateable. |
submitNormal | boolean | in | no | false | Some instances require that the submission of forms caused by this component go through normal submits, not using async IO operations. Setting this to true will cause the form to be submitted in a non-ajax way. |
backLink | String | in | no | Provides ability to have the action encapsulated by the specified AjaxDirectLink used when users hit back button on browser. | |
forwardLink | String | in | no | Provides ability to have the action encapsulated by the specified AjaxDirectLink used when users hits forward button on browser AFTER hitting back button provided in backLink first. | |
clientSideValidationEnabled | boolean | in | no | true | Whether or not to use client side validation on the form during this events submission. |
Body: rendered
Informal parameters: allowed
Reserved parameters: href, onclick
Examples
In this example the AjaxEventSubmit component is used to partially refresh a form when a PropertySelection component's value has been changed.
HTML template
<form jwcid="profileForm"> <span jwcid="countryChangeEvent@tacos:AjaxEventSubmit" updateComponents="ognl:{'profileInfo', 'summIf'}" effects="template:{highlight:{any:'[255,255,184], 500, 500'}}" /> <span jwcid="@FieldLabel" field="component:search" displayName="message:search.field" /> <input jwcid="search@TextField" value="ognl:searchText" /> <span jwcid="@FieldLabel" field="component:countrySelect" displayName="message:country.select" /> <select jwcid="countrySelect@PropertySelection" model="ognl:countryModel" value="ognl:selectedCountry" validators="validators:required" eventListener="onchange=components.countryChangeEvent.id" /> <span jwcid="@Any" id="profileInfo" class="note"> <span jwcid="@If" condition="ognl:selectedCountry"> <h2>Country Information</h2> <span jwcid="@Insert" value="ognl:selectedCountry.toString()" /> </span> </span> </form>
Page specification
<property name="selectedCountry" persist="session" /> <property name="summaryText" /> <property name="searchText" /> <component id="profileForm" type="tacos:AjaxForm" > <binding name="updateComponents" value="ognl:{'wizard'}" /> <binding name="delegate" value="bean:delegate" /> <binding name="listener" value="listener:selectProfile" /> </component>
Java sources
public abstract class PartialSubmit extends BasePage { public abstract Locale getSelectedCountry(); public IPropertySelectionModel getCountryModel() { return new BeanPropertySelectionModel( Arrays.asList(Locale.getAvailableLocales()), "displayCountry"); } }