...
Ajax support is included in many built-in components and component mixins via the async
parameter (in Tapestry 5.4+) and the zone
parameter (for earlier versions). Here we use an EventLink component to trigger an Ajax update of another area of the page:
Code Block | ||||
---|---|---|---|---|
| ||||
<t:eventlink event="updateTime" async="true">update</t:eventlink> ... <t:zone t:id="timeArea" id="timeArea"> The current time is ${currentTime} </t:zone> |
The corresponding Java code looks like this:
Code Block | ||||
---|---|---|---|---|
| ||||
@Inject private AjaxResponseRenderer ajaxResponseRenderer; @InjectComponent private Zone timeArea; @Property private Date currentTime; ... void onUpdateTime() { currentTime = new Date(); ajaxResponseRenderer ajaxResponseRenderer.addRender(timeArea); } |
That onUpdateTime
method is just an ordinary Tapestry event handler, except that it uses an injected AjaxResponseRenderer
to tell Tapestry what zone to update when the link is clicked.
ZonesZones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a <div>.
...
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's <div>the async
and/or zone
parameters. Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to a partial page response is sent to the client, and the content of that response is used to update the Zone's <div> in place.
...
language | xml |
---|
Event Handler Return Types
Wiki Markup |
---|
{float:right|background=#eee|padding=0 1em}
*JumpStart Demo:* |
...
|
...
Event Handler Return Types
Wiki Markup |
---|
{float:right|background=#eee|padding=0 1em} *JumpStart Demo:* [AJAX ActionLink|http://jumpstart[AJAX ActionLink|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/actionlink] {float} |
In contrast, with a Zone update, the return value is may used to render a partial response within the same request.
Note |
---|
Starting in Tapestry 5.3, Ajax event handlers typically have a void return type and use AjaxResponseRenderer to indicate which zone to update. The AjaxResponseRender approach means that the |
This return value is often just the zone's own body (as below), but it can also be an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's <div>.
...