THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
A Zone updated can be triggered by an EventLink, ActionLink or Select component, or by a Form. All of these components support the async and/or zone parameters. Clicking such a link will invoke an event handler method on the server as normal ... except that 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.
| Wiki Markup |
|---|
{float:right|background=#eee|padding=0 1em}
*JumpStart Demo:*
[AJAX ActionLink|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/actionlink]
{float} |
Event Handler Return Types
...
| Code Block | ||
|---|---|---|
| ||
@Inject
private Request request;
@InjectComponent
private Zone myZone;
...
Object onActionFromSomeLink()
{
// return either the zone body (ajax) or whole page (non-ajax)
return request.isXHR() ? myZone.getBody() : null;
}
|
Multiple Zone Updates
| Wiki Markup |
|---|
{float:right|background=#eee|padding=0 1em}
*JumpStart Demo:*
[AJAX Multiple Zone Update| |
...
https://tapestry-jumpstart. |
...
org/jumpstart/examples/ajax/multiplezoneupdate] {float} |
An event handler often needs to update multiple zones on the client side. To accomplish this, use an AjaxResponseRenderer, indicating the zones to update. You must know the client-side id for each zone to update (the best way for this is to lock down the zone's id using the id parameter of the Zone component).
...
If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:
Tapestry.ElementEffect Function | Result |
|---|---|
highlight() | (the default) highlight changes to an already-visible zone |
show() | make the zone visible if it isn't already visible |
slidedown() | scroll the content down |
slideup() | slide the content back up (opposite of slidedown) |
fade() | fade the content out (opposite of show) |
To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter:
...
If you create a component that contains a zone, and you use that component in a loop, you'll likely need to set the client-side id like this:
| Code Block | ||
|---|---|---|
| ||
<t:zone t:id="myzone" id="prop:componentResources.id"> |
See this JumpStart Example for details.
The show and update function names (Tapestry 5.3 and earlier only) are converted to lower case; all the methods of Tapestry.ElementEffect should have all lower-case names. Because client-side JavaScript is so fluid (new methods may be added to existing objects), Tapestry makes no attempt to validate the function names ... however, if the names are not valid, then the default show and highlight methods will be used.
...
There are also a number of Ajax-related examples at the Tapestry JumpStart site.
| Anchor | ||||
|---|---|---|---|---|
|
Autocomplete Mixin
| Wiki Markup |
|---|
{float:right|background=#eee|padding=0 1em}
*JumpStart Demo:*
[Autocomplete Mixin|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/autocompletemixin]
{float} |
The Autocomplete mixin exists to allow a text field to query the server for completions for a partially entered phrase. It is often used in situations where the field exists to select a single value from a large set, too large to successfully download to the client as a drop down list; for example, when the number of values to select from is numbered in the thousands.
...
You can return an object array, a list, even a single object. You may return objects instead of strings ... and toString() will be used to convert them into client-side strings.
Invoking server-side event handler methods from JavaScript
...
- The element itself
- The element's previous siblings, closest first (bottom-up)
- The element's parents
- The page's <
body>element
...
Here's one example:
| Code Block | ||
|---|---|---|
| ||
public class PublishEventDemoComponent
{
@OnEvent("answer")
@PublishEvent
JSONObject answer() {
return new JSONObject("origin", "componentAnswer");
}
@PublishEvent
JSONObject onAction()
{
return new JSONObject("origin", "componentAction");
}
}
|
...