[prev in list] [next in list] [prev in thread] [next in thread]
List: tapestry-dev
Subject: svn commit: r1020446 - /websites/production/tapestry/content/ajax-and-zones.html
From: bobharner () apache ! org
Date: 2017-11-04 16:12:02
Message-ID: 20171104161202.560343A01E5 () svn01-us-west ! apache ! org
[Download RAW message or body]
Author: bobharner
Date: Sat Nov 4 16:12:02 2017
New Revision: 1020446
Log:
Manually restoring old version as a work-around for INFRA-14971
Modified:
websites/production/tapestry/content/ajax-and-zones.html
Modified: websites/production/tapestry/content/ajax-and-zones.html
==============================================================================
--- websites/production/tapestry/content/ajax-and-zones.html (original)
+++ websites/production/tapestry/content/ajax-and-zones.html Sat Nov 4 16:12:02 2017
@@ -27,6 +27,17 @@
</title>
<link type="text/css" rel="stylesheet" href="/resources/space.css" />
+ <link href='/resources/highlighter/styles/shCoreCXF.css' rel='stylesheet' \
type='text/css' /> + <link href='/resources/highlighter/styles/shThemeCXF.css' \
rel='stylesheet' type='text/css' /> + <script \
src='/resources/highlighter/scripts/shCore.js' type='text/javascript'></script> + \
<script src='/resources/highlighter/scripts/shBrushJava.js' \
type='text/javascript'></script> + <script \
src='/resources/highlighter/scripts/shBrushXml.js' type='text/javascript'></script> + \
<script src='/resources/highlighter/scripts/shBrushJScript.js' \
type='text/javascript'></script> + <script \
src='/resources/highlighter/scripts/shBrushPlain.js' type='text/javascript'></script> \
+ <script> + SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -67,12 +78,111 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><parameter \
ac:name="style">float:right</parameter><parameter ac:name="title">Related \
Articles</parameter><parameter \
ac:name="class">aui-label</parameter><rich-text-body><parameter \
ac:name="showLabels">false</parameter><parameter \
ac:name="showSpace">false</parameter><parameter ac:name="title">Related \
Articles</parameter><parameter ac:name="cql">label in ("ajax","javascript") and space \
= currentSpace()</parameter></rich-text-body><p>Tapestry provides easy-to-use support \
for <strong>Ajax</strong>, the technique of using JavaScript to dynamically update \
parts of a web page with content from the server without redrawing the whole page. \
With Tapestry, you can do simple Ajax updates without having to write any JavaScript \
code at all.</p><p>Ajax support is included in many <a \
href="component-reference.html">built-in components</a> and <a \
href="component-mixins.html">component mixins</a> via the <code>async</code> \
parameter (in Tapestry 5.4+ ) and the <code>zone</code> parameter (for earlier \
versions). Here we use an EventLink component to trigger an Ajax update of another \
area of the page:</p><parameter ac:name="language">xml</parameter><parameter \
ac:name="title">Page or component template \
(partial)</parameter><plain-text-body><t:eventlink event="updateTime" \
async="true">update</t:eventlink> + <div \
id="ConfluenceContent"><div class="aui-label" style="float:right" title="Related \
Articles"> +
+
+
+
+
+
+
+
+<h3>Related Articles</h3>
+
+<ul class="content-by-label"><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="ajax-and-zones.html">Ajax and Zones</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="legacy-javascript.html">Legacy JavaScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="coffeescript.html">CoffeeScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="client-side-javascript.html">Client-Side \
JavaScript</a> +
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="javascript-modules.html">JavaScript Modules</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="javascript-faq.html">JavaScript FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="ajax-components-faq.html">Ajax Components FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="component-cheat-sheet.html">Component Cheat \
Sheet</a> +
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default" \
title="Page">Page:</span> </div> +
+ <div class="details">
+ <a href="assets.html">Assets</a>
+
+
+ </div>
+ </li></ul>
+</div>
+
+
+<p>Tapestry provides easy-to-use support for <strong>Ajax</strong>, the technique of \
using JavaScript to dynamically update parts of a web page with content from the \
server without redrawing the whole page. With Tapestry, you can do simple Ajax \
updates without having to write any JavaScript code at all.</p><p>Ajax support is \
included in many <a href="component-reference.html">built-in components</a> and <a \
href="component-mixins.html">component mixins</a> via the <code>async</code> \
parameter (in Tapestry 5.4+) and the <code>zone</code> parameter (for earlier \
versions). Here we use an EventLink component to trigger an Ajax update of another \
area of the page:</p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Page or \
component template (partial)</b></div><div class="codeContent panelContent pdl"> \
+<pre class="brush: xml; gutter: false; theme: Default" \
style="font-size:12px;"><t:eventlink event="updateTime" \
async="true">update</t:eventlink>
...
<t:zone t:id="timeArea" id="timeArea">
The current time is ${currentTime}
</t:zone>
-</plain-text-body><p>The corresponding Java code might look like this:</p><parameter \
ac:name="language">java</parameter><parameter ac:name="title">Page or component class \
(partial)</parameter><plain-text-body>@Inject +</pre>
+</div></div><p>The corresponding Java code might look like this:</p><div class="code \
panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" \
style="border-bottom-width: 1px;"><b>Page or component class (partial)</b></div><div \
class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: \
Default" style="font-size:12px;">@Inject private AjaxResponseRenderer \
ajaxResponseRenderer;
@InjectComponent
@@ -86,10 +196,11 @@ void onUpdateTime()
{
currentTime = new Date();
 ajaxResponseRenderer.addRender(timeArea);
-} </plain-text-body><p>That <code>onUpdateTime</code> method is just an ordinary \
Tapestry event handler, except that it uses an injected \
<code>AjaxResponseRenderer</code> to tell Tapestry what zone to update when the link \
is clicked.</p><p>Since Tapestry 5.4.2, you can also easily invoke server-side event \
handlers using the <code>@PublishEvents</code> annotation and \
the <code>t5/core/ajax</code> JavaScript function, as explained in the \
"<span style="font-size: 14.0px;">Invoking server-side event handler methods from \
JavaScript" section below.</span></p><h3 id="AjaxandZones-Zones">Zones</h3><p>Zones \
are Tapestry's approach to performing partial page updates. A <a \
class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone \
component</a> renders as an HTML element, typically a <div>, and serves as a \
marker for where dynamically-updated content should be replaced. A zone is \
recognizable in the DOM b ecause it will have the \
attribute <code>data-container-type=zone</code>. The client-side support for \
Zones is keyed off of this attribute and value.</p><p>Starting in Tapestry 5.4 you \
can use any HTML element in your template as a zone marker, by passing its \
client-side id to the two-argument version of the addRender method.</p><p><span \
style="line-height: 1.4285715;">A Zone updated can be triggered by an EventLink, \
ActionLink or Select component, or by a Form. All of these components support the \
<code>async</code> and/or <code>zone</code> parameters. Clicking such a link will \
invoke an event handler method on the server as normal ... except that a </span><em \
style="line-height: 1.4285715;">partial page response</em><span style="line-height: \
1.4285715;"> is sent to the client, and the content of that response is used to \
update the Zone's <div> in \
place.</span><plain-text-body>{float:right|background=#eee|padding=0 \
1em}
- *JumpStart Demo:*
- [AJAX ActionLink|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/actionlink]
-{float}</plain-text-body></p><h3 id="AjaxandZones-EventHandlerReturnTypes">Event \
Handler Return Types</h3><p>In a traditional request, the return value of an event \
handler method may used to determine which page will render a <em>complete</em> \
response, and a <em>redirect</em> may sent to the client to render the new page (as a \
new request).</p><p>In contrast, with a Zone update, the return value may used to \
render a <em>partial response</em> within the <em>same \
request</em>.</p><rich-text-body><p>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 <code>zone</code> \
parameter's value (oridinarily indicating which zone to update) is no longer needed. \
Tapestry 5.4 introduced the <code>async="true"</code> parameter to avoid having \
to redundantly indicate which zone to update.</p></rich-text-body><p>If you only have \
one zone to update and do n't want to use AjaxResponseRenderer, you can instead \
return a value from your event handler method. The simplest case is just to return \
the zone's own body:</p><parameter \
ac:name="language">java</parameter><plain-text-body>@Inject +} </pre>
+</div></div><p>That <code>onUpdateTime</code> method is just an ordinary Tapestry \
event handler, except that it uses an injected <code>AjaxResponseRenderer</code> to \
tell Tapestry what zone to update when the link is clicked.</p><p>Since Tapestry \
5.4.2, you can also easily invoke server-side event handlers using \
the <code>@PublishEvents</code> annotation and \
the <code>t5/core/ajax</code> JavaScript function, as explained in the \
"<span style="font-size: 14.0px;">Invoking server-side event handler methods from \
JavaScript" section below.</span></p><h3 id="AjaxandZones-Zones">Zones</h3><p>Zones \
are Tapestry's approach to performing partial page updates. A <a \
class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone \
component</a> renders as an HTML element, typically a <div>, and serves as a \
marker for where dynamically-updated content should be replaced. A zone is \
recognizable in the DOM because i t will have the \
attribute <code>data-container-type=zone</code>. The client-side support for \
Zones is keyed off of this attribute and value.</p><p>Starting in Tapestry 5.4 you \
can use any HTML element in your template as a zone marker, by passing its \
client-side id to the two-argument version of the addRender method.</p><p><span \
style="line-height: 1.4285715;">A Zone updated can be triggered by an EventLink, \
ActionLink or Select component, or by a Form. All of these components support the \
<code>async</code> and/or <code>zone</code> parameters. Clicking such a link will \
invoke an event handler method on the server as normal ... except that a </span><em \
style="line-height: 1.4285715;">partial page response</em><span style="line-height: \
1.4285715;"> is sent to the client, and the content of that response is used to \
update the Zone's <div> in place.</span></p><div class="navmenu" \
style="float:right; background:#eee; margin:3px; padding:0 1em"> +<p> \
<strong>JumpStart Demo:</strong><br clear="none"> + <a class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/actionlink" \
rel="nofollow">AJAX ActionLink</a></p></div><h3 \
id="AjaxandZones-EventHandlerReturnTypes">Event Handler Return Types</h3><p>In a \
traditional request, the return value of an event handler method may used to \
determine which page will render a <em>complete</em> response, and a \
<em>redirect</em> may sent to the client to render the new page (as a new \
request).</p><p>In contrast, with a Zone update, the return value may used to render \
a <em>partial response</em> within the <em>same request</em>.</p><div \
class="confluence-information-macro confluence-information-macro-note"><span \
class="aui-icon aui-icon-small aui-iconfont-warning \
confluence-information-macro-icon"></span><div \
class="confluence-information-macro-body"><p>Starting in Tapestry 5.3, Ajax event \
handlers typically have a void return type and use AjaxResponseRenderer to indicate \
which zone to update. The AjaxResponseRe nder approach means that \
the <code>zone</code> parameter's value (oridinarily indicating which zone to \
update) is no longer needed. Tapestry 5.4 introduced \
the <code>async="true"</code> parameter to avoid having to redundantly indicate \
which zone to update.</p></div></div><p>If you only have one zone to update and don't \
want to use AjaxResponseRenderer, you can instead return a value from your event \
handler method. The simplest case is just to return the zone's own body:</p><div \
class="code panel pdl" style="border-width: 1px;"><div class="codeContent \
panelContent pdl"> +<pre class="brush: java; gutter: false; theme: Default" \
style="font-size:12px;">@Inject private Request request;
@InjectComponent
@@ -98,7 +209,9 @@ private Zone myZone;
Object onActionFromSomeLink()
{
return myZone.getBody(); // AJAX request, return zone's own body
-}</plain-text-body><p>The possible return values are:</p><ul><li>An injected Block \
or Component to render as the response. The response will be a JSON hash, with a \
"content" key whose value is the rendered markup. This is the basis for updates with \
the Zone component.</li><li>The zone's own body (using Zone's getBody() \
method)</li><li>null (to redraw the current page)</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html">JSONObject</a> \
or <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html">JSONArray</a>, \
which will be sent as the response.</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html">StreamResponse</a>, \
which will be sent as the response.</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html">Link</a>, \
wh ich will send a redirect to the client.</li><li>A page name (as a String), or a \
page class, or a page instance, which will send a redirect to the indicated \
page.</li></ul><p>See <a href="page-navigation.html">Page Navigation</a> for full \
descriptions of the above.</p><h3 id="AjaxandZones-GracefulDegradation">Graceful \
Degradation</h3><p>Users who do not have JavaScript enabled may click EventLinks (or \
ActionLinks, or Forms) that are configured to update a Zone. When that occurs, the \
request will still be sent to the server, but Tapestry will handle it as a \
<em>traditional</em> request.</p><p>This happens automatically when your event \
handler method has a void return type.</p><p>However, to support graceful degradation \
when your event handler method has a <em>non-void</em> return type, you should detect \
non-Ajax requests and return a traditional response, typically null to redraw the \
whole page. This is accomplished by injecting the <a class="external-link" \
href="http://tapestry.apa \
che.org/current/apidocs/org/apache/tapestry5/services/Request.html">Request</a> \
object, and invoking the isXHR() method. This value will be true for Ajax requests, \
and false for traditional request.</p><parameter \
ac:name="language">java</parameter><plain-text-body>@Inject +}</pre>
+</div></div><p>The possible return values are:</p><ul><li>An injected Block or \
Component to render as the response. The response will be a JSON hash, with a \
"content" key whose value is the rendered markup. This is the basis for updates with \
the Zone component.</li><li>The zone's own body (using Zone's getBody() \
method)</li><li>null (to redraw the current page)</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html">JSONObject</a> \
or <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html">JSONArray</a>, \
which will be sent as the response.</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html">StreamResponse</a>, \
which will be sent as the response.</li><li>A <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html">Link</a>, \
which wil l send a redirect to the client.</li><li>A page name (as a String), or a \
page class, or a page instance, which will send a redirect to the indicated \
page.</li></ul><p>See <a href="page-navigation.html">Page Navigation</a> for full \
descriptions of the above.</p><h3 id="AjaxandZones-GracefulDegradation">Graceful \
Degradation</h3><p>Users who do not have JavaScript enabled may click EventLinks (or \
ActionLinks, or Forms) that are configured to update a Zone. When that occurs, the \
request will still be sent to the server, but Tapestry will handle it as a \
<em>traditional</em> request.</p><p>This happens automatically when your event \
handler method has a void return type.</p><p>However, to support graceful degradation \
when your event handler method has a <em>non-void</em> return type, you should detect \
non-Ajax requests and return a traditional response, typically null to redraw the \
whole page. This is accomplished by injecting the <a class="external-link" \
href="http://tapestry.apache.org \
/current/apidocs/org/apache/tapestry5/services/Request.html">Request</a> object, and \
invoking the isXHR() method. This value will be true for Ajax requests, and false for \
traditional request.</p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: \
Default" style="font-size:12px;">@Inject private Request request;
@InjectComponent
@@ -109,10 +222,11 @@ Object onActionFromSomeLink()
// return either the zone body (ajax) or whole page (non-ajax)
return request.isXHR() ? myZone.getBody() : null;
}
-</plain-text-body><h3 id="AjaxandZones-MultipleZoneUpdates">Multiple Zone \
Updates</h3><p><plain-text-body>{float:right|background=#eee|padding=0 \
1em}
- *JumpStart Demo:*
- [AJAX Multiple Zone \
Update|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/multiplezoneupdate]
-{float}</plain-text-body>An event handler often needs to update multiple zones on \
the client side. To accomplish this, use an <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>, \
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).</p><p><em>AjaxResponseRenderer was introduced in Tapestry 5.3. \
For Tapestry 5.2 and earlier, return a <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneUpdate.html">MultiZoneUpdate</a> \
object instead.</em></p><p>The renderer for each zone can be the zone itself, a \
block, a component, a <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html">Renderable</a> \
or a <a class="external-link" href="http:// \
tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html">RenderCommand</a> \
... or an object, such as String, that can be coerced to either of \
these.</p><parameter ac:name="language">java</parameter><parameter \
ac:name="title">For Tapestry 5.3 and \
later</parameter><plain-text-body>@InjectComponent +</pre>
+</div></div><h3 id="AjaxandZones-MultipleZoneUpdates">Multiple Zone \
Updates</h3><p></p><div class="navmenu" style="float:right; background:#eee; \
margin:3px; padding:0 1em"> +<p> <strong>JumpStart Demo:</strong><br clear="none">
+ <a class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/multiplezoneupdate" \
rel="nofollow">AJAX Multiple Zone Update</a></p></div>An event handler often needs to \
update multiple zones on the client side. To accomplish this, use an <a \
class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>, \
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).<p><em>AjaxResponseRenderer was introduced in Tapestry 5.3. For \
Tapestry 5.2 and earlier, return a <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneUpdate.html">MultiZoneUpdate</a> \
object instead.</em></p><p>The renderer for each zone can be the zone itself, a \
block, a component, a <a class="external-link" hr \
ef="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html">Renderable</a> \
or a <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html">RenderCommand</a> \
... or an object, such as String, that can be coerced to either of these.</p><div \
class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader \
pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.3 and later</b></div><div \
class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: \
Default" style="font-size:12px;">@InjectComponent private Zone userInput;
@InjectComponent
@@ -126,13 +240,24 @@ void onActionFromRegister()
ajaxResponseRenderer.addRender("userInput",
userInput).addRender("helpPanel", helpPanel);
}
-</plain-text-body><p><span style="line-height: 1.4285715;">This example assumes that \
there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, \
waiting to receive the updated content.</span></p><p><span style="line-height: \
1.4285715;"> </span></p><rich-text-body><p>In this example, the Zone receives \
the update but does not provide any content. That's OK, the other client-side \
elements (<code>userInput</code> and <code>helpPanel</code>) will be updated, and the \
zone's content left unchanged.</p></rich-text-body><p>This demonstrates why it is \
necessary for the developer to specify a particular client-side id for Zone \
components; if they were dynamically allocated ids, as is typical in most other \
elements, it would be impossible for this code to know what client-side id was used \
for the Zone.</p><h3 id="AjaxandZones-ZoneComponentIdvs.ZoneElementId">Zone Component \
Id vs. Zone Element Id</h3><p>Like all Tapestry components, Zones have a component \
id, specified using the <code>t:id</code> attribute. If you do not assign a \
component id, a unique id is assigned by Tapestry.</p><p>However, to coordinate \
things on the client side, it is necessary for components that wish to update the \
zone know the <em>client-side element id</em>. This is specified with the \
<code>id</code> parameter of the Zone component. If the <code>id</code> parameter is \
not bound, then a unique value (for the current page and render) is generated by \
Tapestry and this value is difficult to predict. (The actual value will be available \
as the <code>clientId</code> property of the Zone component itself.)</p><p>Remember \
that the component id (<code>t:id</code>) is used to <em>inject</em> the Zone \
component into the containing page or component. The client-side id (<code>id</code>) \
is used on the client side to orchestrate requests and updates. You will often seen \
the following construct:</p><parameter \
ac:name="language">xml</parameter><plain-text-body><t:zone t:id="myZone" \
id="myzone"> ... </t:zone>
-</plain-text-body><h3 id="AjaxandZones-TheContainingZone(zone="^")">The \
Containing Zone (zone="^")</h3><p><em><strong>Since 5.2</strong></em></p><p>If the \
Form or Link is enclosed by the Zone itself, and you're using \
the <code>zone</code> parameter instead of the <code>async</code> \
parameter, then the <code>zone</code> parameter may be set to the special \
value <strong><code>^</code></strong><code> (the carat)</code>. The zone is \
found – on the client side – by searching up form the form or \
link element for the first enclosing element that is a Zone. In this way, the \
client-side coordination can occur without having to know what the specific \
client-side id of the Zone is. Because of this, in some cases it is no longer \
necessary to specify the Zone's <code>id</code> parameter.</p><h3 \
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update div \
within a Zone div (Tapestry 5.3 and earlier)</h3><p><em><strong>De \
precated</strong><strong>:</strong> This feature is removed starting with Tapestry \
5.4</em></p><p>In many situations, a Zone is a kind of "wrapper" or "container" for \
dynamic content; one that provides a look and feel ... a bit of wrapping markup to \
create a border. In that situation, the Zone <div> may contain an update \
<div>.</p><p>An Update <div> is specifically a <div> element marked \
with the CSS class "t-zone-update", <em>inside</em> the Zone's <div>.</p><p>If \
an Update div exists within a Zone div, then when Tapestry updates a zone only the \
update <div>'s content will be changed, rather than the entire Zone \
<div>.</p><p>The show and update functions (see Zone Functions, below) apply to \
the Zone <div>, not just the update <div>.</p><h3 \
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect Functions \
(Tapestry 5.3 and earlier)</h3><p><strong><em>Deprecated:</em></strong> This feature \
refers to client-side lo gic only present in Tapestry 5.3 or earlier. For 5.4, there \
are client-side events that are triggered before and after changes to the Zone; \
listeners on those events can trigger whatever animations they like.</p><p>A Zone may \
be initially visible or invisible. When a Zone is updated, it is made visible if not \
currently so. This is accomplished via a function on the Tapestry.ElementEffect \
client-side object. By default, the show() function is used for this purpose. If you \
want Tapestry to call a different Tapestry.ElementEffect function when updates occur, \
specify its name with the zone's show parameter.</p><p>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:</p><div class="table-wrap"><table \
class="confluenceTable">< tbody><tr><th colspan="1" rowspan="1" \
class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1" \
rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1" \
rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>(the default) highlight changes to an already-visible \
zone</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>make the zone visible if it isn't already \
visible</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td colspan="1" \
rowspan="1" class="confluenceTd"><p>slideup()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>slide the content back up (opposite of \
slidedown)</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>fade()</p></td><td colspan= "1" rowspan="1" \
class="confluenceTd"><p>fade the content out (opposite of \
show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone without \
the usual yellow highlight effect, just specify "show" for the update \
parameter:</p><parameter \
ac:name="language">xml</parameter><plain-text-body><t:zone t:id="myZone" \
t:update="show"></plain-text-body><p>You may also define and use your own \
JavaScript effect function (with lower-case names), like this:</p><parameter \
ac:name="language">js</parameter><plain-text-body>Tapestry.ElementEffect.myeffectname \
= function(element){ YourJavascriptCodeGoesHere; };
-</plain-text-body><h3 id="AjaxandZones-ZoneLimitations">Zone \
Limitations</h3><p>Unlike many other situations, Tapestry relies on you to specify \
useful and unique ids to Zone components, then reference those ids inside EventLink \
(or ActionLink, or Form) components. Using Zone components inside any kind of loop \
may cause additional problems, as Tapestry will <em>uniqueify</em> the client id you \
specify (appending an index number).</p><p>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:</p><p> </p><parameter \
ac:name="language">xml</parameter><plain-text-body><t:zone t:id="myzone" \
id="prop:componentResources.id"></plain-text-body><p> </p><p>See <a \
class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart7/examples/ajax/components1" \
rel="nofollow">this JumpStart Example</a> for details.</p><p>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.</p><p>Zones \
may only be used inside the <em>body</em> of a page, not the head<em>.</em></p><h3 \
id="AjaxandZones-MoreInformation">More Information</h3><p>For examples of extending a \
Form with a Zone and updating multiple zones at once, see the <a \
href="ajax-components-faq.html">Ajax Components FAQ</a>.</p><p>There are also a \
number of Ajax-related examples at the  <a class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart7/" rel="nofollow"><span \
class="confluence-link">Tapestry JumpStart</span></a> site.</p><p><parameter \
ac:name="">autocomplete</parameter></p><h2 \
id="AjaxandZones-AutocompleteMixin">Autocomple te \
Mixin</h2><p><plain-text-body>{float:right|background=#eee|padding=0 \
1em}
- *JumpStart Demo:*
- [Autocomplete Mixin|http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/autocompletemixin]
-{float}</plain-text-body>The <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html">Autocomplete</a> \
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.</p><p>Autocomplete can be added to an existing text \
field:</p><parameter ac:name="language">java</parameter><plain-text-body> \
<t:textfield t:id="accountName" t:mixins="autocomplete" \
size="100"/>
-</plain-text-body><p>The mixin can be configured in a number of ways, see the <a \
class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html">component \
reference</a>.</p><p>When the user types into the field, the client-side JavaScript \
will send a request to the server to get completions.</p><p>You must write an event \
handler to provide these completions. The name of the event is "providecompletions". \
The context is the partial input value, and the return value will be converted into \
the selections for the user.</p><p>For example:</p><parameter \
ac:name="language">java</parameter><plain-text-body> List<String> \
onProvideCompletionsFromAccountName(String partial) +</pre>
+</div></div><p><span style="line-height: 1.4285715;">This example assumes that there \
are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting \
to receive the updated content.</span></p><p><span style="line-height: \
1.4285715;"> </span></p><div class="confluence-information-macro \
confluence-information-macro-note"><span class="aui-icon aui-icon-small \
aui-iconfont-warning confluence-information-macro-icon"></span><div \
class="confluence-information-macro-body"><p>In this example, the Zone receives the \
update but does not provide any content. That's OK, the other client-side elements \
(<code>userInput</code> and <code>helpPanel</code>) will be updated, and the zone's \
content left unchanged.</p></div></div><p>This demonstrates why it is necessary for \
the developer to specify a particular client-side id for Zone components; if they \
were dynamically allocated ids, as is typical in most other elements, it would be \
impossible for this code to know what client-sid e id was used for the Zone.</p><h3 \
id="AjaxandZones-ZoneComponentIdvs.ZoneElementId">Zone Component Id vs. Zone Element \
Id</h3><p>Like all Tapestry components, Zones have a component id, specified using \
the <code>t:id</code> attribute. If you do not assign a component id, a unique id is \
assigned by Tapestry.</p><p>However, to coordinate things on the client side, it is \
necessary for components that wish to update the zone know the <em>client-side \
element id</em>. This is specified with the <code>id</code> parameter of the Zone \
component. If the <code>id</code> parameter is not bound, then a unique value (for \
the current page and render) is generated by Tapestry and this value is difficult to \
predict. (The actual value will be available as the <code>clientId</code> property of \
the Zone component itself.)</p><p>Remember that the component id (<code>t:id</code>) \
is used to <em>inject</em> the Zone component into the containing page or component. \
The client-side id (<code>id</code>) is used on the client side to orchestrate \
requests and updates. You will often seen the following construct:</p><div \
class="code panel pdl" style="border-width: 1px;"><div class="codeContent \
panelContent pdl"> +<pre class="brush: xml; gutter: false; theme: Default" \
style="font-size:12px;"><t:zone t:id="myZone" id="myzone"> ... </t:zone> \
+</pre> +</div></div><h3 id="AjaxandZones-TheContainingZone(zone="^")">The \
Containing Zone (zone="^")</h3><p><em><strong>Since 5.2</strong></em></p><p>If the \
Form or Link is enclosed by the Zone itself, and you're using \
the <code>zone</code> parameter instead of the <code>async</code> \
parameter, then the <code>zone</code> parameter may be set to the special \
value <strong><code>^</code></strong><code> (the carat)</code>. The zone is \
found – on the client side – by searching up form the form or \
link element for the first enclosing element that is a Zone. In this way, the \
client-side coordination can occur without having to know what the specific \
client-side id of the Zone is. Because of this, in some cases it is no longer \
necessary to specify the Zone's <code>id</code> parameter.</p><h3 \
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update div \
within a Zone div (Tapestry 5.3 and earlier)</h3><p><em><strong>Deprecat \
ed</strong><strong>:</strong> This feature is removed starting with Tapestry \
5.4</em></p><p>In many situations, a Zone is a kind of "wrapper" or "container" for \
dynamic content; one that provides a look and feel ... a bit of wrapping markup to \
create a border. In that situation, the Zone <div> may contain an update \
<div>.</p><p>An Update <div> is specifically a <div> element marked \
with the CSS class "t-zone-update", <em>inside</em> the Zone's <div>.</p><p>If \
an Update div exists within a Zone div, then when Tapestry updates a zone only the \
update <div>'s content will be changed, rather than the entire Zone \
<div>.</p><p>The show and update functions (see Zone Functions, below) apply to \
the Zone <div>, not just the update <div>.</p><h3 \
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect Functions \
(Tapestry 5.3 and earlier)</h3><p><strong><em>Deprecated:</em></strong> This feature \
refers to client-side logic on ly present in Tapestry 5.3 or earlier. For 5.4, there \
are client-side events that are triggered before and after changes to the Zone; \
listeners on those events can trigger whatever animations they like.</p><p>A Zone may \
be initially visible or invisible. When a Zone is updated, it is made visible if not \
currently so. This is accomplished via a function on the Tapestry.ElementEffect \
client-side object. By default, the show() function is used for this purpose. If you \
want Tapestry to call a different Tapestry.ElementEffect function when updates occur, \
specify its name with the zone's show parameter.</p><p>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:</p><div class="table-wrap"><table \
class="confluenceTable"><tbody> <tr><th colspan="1" rowspan="1" \
class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1" \
rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1" \
rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>(the default) highlight changes to an already-visible \
zone</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>make the zone visible if it isn't already \
visible</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td colspan="1" \
rowspan="1" class="confluenceTd"><p>slideup()</p></td><td colspan="1" rowspan="1" \
class="confluenceTd"><p>slide the content back up (opposite of \
slidedown)</p></td></tr><tr><td colspan="1" rowspan="1" \
class="confluenceTd"><p>fade()</p></td><td colspan="1" ro wspan="1" \
class="confluenceTd"><p>fade the content out (opposite of \
show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone without \
the usual yellow highlight effect, just specify "show" for the update \
parameter:</p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeContent panelContent pdl"> +<pre class="brush: xml; gutter: false; theme: \
Default" style="font-size:12px;"><t:zone t:id="myZone" t:update="show"></pre> \
+</div></div><p>You may also define and use your own JavaScript effect function (with \
lower-case names), like this:</p><div class="code panel pdl" style="border-width: \
1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: js; gutter: \
false; theme: Default" style="font-size:12px;">Tapestry.ElementEffect.myeffectname = \
function(element){ YourJavascriptCodeGoesHere; }; +</pre>
+</div></div><h3 id="AjaxandZones-ZoneLimitations">Zone Limitations</h3><p>Unlike \
many other situations, Tapestry relies on you to specify useful and unique ids to \
Zone components, then reference those ids inside EventLink (or ActionLink, or Form) \
components. Using Zone components inside any kind of loop may cause additional \
problems, as Tapestry will <em>uniqueify</em> the client id you specify (appending an \
index number).</p><p>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:</p><p> </p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeContent panelContent pdl"> +<pre class="brush: xml; gutter: false; theme: \
Default" style="font-size:12px;"><t:zone t:id="myzone" \
id="prop:componentResources.id"></pre> +</div></div><p> </p><p>See <a \
class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart7/examples/ajax/components1" \
rel="nofollow">this JumpStart Example</a> for details.</p><p>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.</p><p>Zones \
may only be used inside the <em>body</em> of a page, not the head<em>.</em></p><h3 \
id="AjaxandZones-MoreInformation">More Information</h3><p>For examples of extending a \
Form with a Zone and updating multiple zones at once, see the <a \
href="ajax-components-faq.html">Ajax Components FAQ</a>.</p><p>There are also a \
number of Ajax-related examples at the   ;<a class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart7/" rel="nofollow"><span \
class="confluence-link">Tapestry JumpStart</span></a> site.</p><p><span \
class="confluence-anchor-link" id="AjaxandZones-autocomplete"></span></p><h2 \
id="AjaxandZones-AutocompleteMixin">Autocomplete Mixin</h2><p></p><div \
class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em"> +<p> \
<strong>JumpStart Demo:</strong><br clear="none"> + <a class="external-link" \
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/autocompletemixin" \
rel="nofollow">Autocomplete Mixin</a></p></div>The <a class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html">Autocomplete</a> \
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.<p>Autocomplete can be added to an existing text \
field:</p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: \
Default" style="font-size:12px;"> <t:textfield t:id="accountName" \
t:mixins="autocomplete" size="100"/> +</pre>
+</div></div><p>The mixin can be configured in a number of ways, see the <a \
class="external-link" \
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html">component \
reference</a>.</p><p>When the user types into the field, the client-side JavaScript \
will send a request to the server to get completions.</p><p>You must write an event \
handler to provide these completions. The name of the event is "providecompletions". \
The context is the partial input value, and the return value will be converted into \
the selections for the user.</p><p>For example:</p><div class="code panel pdl" \
style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre \
class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> \
List<String> onProvideCompletionsFromAccountName(String partial) {
List<Account> matches = accountDAO.findByPartialAccountName(partial);
@@ -145,7 +270,9 @@ void onActionFromRegister()
return result;
}
-</plain-text-body><p>This presumes that <code>findByPartialAccountName()</code> will \
sort the values, otherwise you will probably want to sort them. The Autocomplete \
mixin does <em>not</em> do any sorting.</p><p>You can return an object array, a list, \
even a single object. You may return objects instead of strings ... and \
<code>toString()</code> will be used to convert them into client-side \
strings.</p><p> </p><h2 \
id="AjaxandZones-Invokingserver-sideeventhandlermethodsfromJavaScript">Invoking \
server-side event handler methods from JavaScript</h2><p>Tapestry 5.4.2 introduced an \
API which makes it easy for server-side events to be invoked from JavaScript. On the \
server-side, you first need to annotate the event handler methods you want to expose \
with the <code>@PublishEvent</code> annotation. Then, in JavaScript, all \
you need to do is to call the existing <code><a class="external-link" \
href="http://tapestry.apache.org/current/coffeescript/ajax.html">t5/core/ajax</ \
a></code> function, but with slightly different parameters.</p><p><code>The \
t5/core/ajax</code> function has two parameters: <code>url</code> \
and <code>options</code>. Prior to Tapestry 5.4.2, the first one was difficult \
to get when doing AJAX requests to event handler methods. You needed to inject \
<code>ComponentResources in your component class</code>, \
call <code>componentResources.createEventLink()</code> for each event handler \
method, then pass all this information back to the browser through one of \
the <code>JavaScriptSupport</code> methods. For Tapestry 5.4.2 and later, your \
JavaScript code only needs to know the event name (also called <em>event type</em>) \
and optionally indicate a DOM element to be used as a starting point for finding the \
event URL.</p><p>All event data is stored \
in <code>data-componenent-events</code> attributes. For page classes, the \
attribute is added to the <code><body></code> element. For components, \
it's ad ded to the first element rendered by the component. Given an HTML element, \
the search is performed in the following order until information for the given event \
is first found:</p><ol><li>The element itself</li><li>The element's previous \
siblings, closest first (bottom-up)</li><li>The element's parents</li><li>The page's \
<<code>body></code> element</li></ol><p> </p><p>Here's one \
example:</p><parameter ac:name="language">java</parameter><plain-text-body>public \
class PublishEventDemoComponent +</pre>
+</div></div><p>This presumes that <code>findByPartialAccountName()</code> will sort \
the values, otherwise you will probably want to sort them. The Autocomplete mixin \
does <em>not</em> do any sorting.</p><p>You can return an object array, a list, even \
a single object. You may return objects instead of strings ... and \
<code>toString()</code> will be used to convert them into client-side \
strings.</p><p> </p><h2 \
id="AjaxandZones-Invokingserver-sideeventhandlermethodsfromJavaScript">Invoking \
server-side event handler methods from JavaScript</h2><p>Tapestry 5.4.2 introduced an \
API which makes it easy for server-side events to be invoked from JavaScript. On the \
server-side, you first need to annotate the event handler methods you want to expose \
with the <code>@PublishEvent</code> annotation. Then, in JavaScript, all \
you need to do is to call the existing <code><a class="external-link" \
href="http://tapestry.apache.org/current/coffeescript/ajax.html">t5/core/ajax</a></co \
de> function, but with slightly different parameters.</p><p><code>The \
t5/core/ajax</code> function has two parameters: <code>url</code> \
and <code>options</code>. Prior to Tapestry 5.4.2, the first one was difficult \
to get when doing AJAX requests to event handler methods. You needed to inject \
<code>ComponentResources in your component class</code>, \
call <code>componentResources.createEventLink()</code> for each event handler \
method, then pass all this information back to the browser through one of \
the <code>JavaScriptSupport</code> methods. For Tapestry 5.4.2 and later, your \
JavaScript code only needs to know the event name (also called <em>event type</em>) \
and optionally indicate a DOM element to be used as a starting point for finding the \
event URL.</p><p>All event data is stored \
in <code>data-componenent-events</code> attributes. For page classes, the \
attribute is added to the <code><body></code> element. For components, \
it's added to the first element rendered by the component. Given an HTML element, \
the search is performed in the following order until information for the given event \
is first found:</p><ol><li>The element itself</li><li>The element's previous \
siblings, closest first (bottom-up)</li><li>The element's parents</li><li>The page's \
<<code>body></code> element</li></ol><p> </p><p>Here's one \
example:</p><div class="code panel pdl" style="border-width: 1px;"><div \
class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: \
Default" style="font-size:12px;">public class PublishEventDemoComponent {
@OnEvent("answer")
@PublishEvent
@@ -160,10 +287,14 @@ void onActionFromRegister()
}
}
-</plain-text-body><p>Notice that <code>answer()</code> \
and <code>onAction()</code> are ordinary event handlers, with nothing \
specific besides the <code>@PublishEvent</code> annotation.</p><parameter \
ac:name="language">xml</parameter><plain-text-body><div id="component" \
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"> +</pre>
+</div></div><p>Notice that <code>answer()</code> \
and <code>onAction()</code> are ordinary event handlers, with nothing \
specific besides the <code>@PublishEvent</code> annotation.</p><div class="code \
panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> \
+<pre class="brush: xml; gutter: false; theme: Default" \
style="font-size:12px;"><div id="component" \
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"> <p \
id="componentParagraph">I'm a component</p> <p id="result">(no result \
yet)</p>
-</div></plain-text-body><p>The template also has nothing special. When \
rendered, the component's events information is placed in the outer \
<<code>div></code> (<code>id="component"). </code></p><p>We want to update \
the text of <code><p id="result"></code> with the value of \
the <code>origin</code> property of the returned JSON object when that element \
itself is clicked, so here's our JavaScript code, supposing we want to trigger the \
<code>answer</code> event:</p><parameter ac:name="language">js</parameter><parameter \
ac:name="linenumbers">true</parameter><plain-text-body>require(["t5/core/ajax", \
"jquery"], function (ajax, $) { +</div></pre>
+</div></div><p>The template also has nothing special. When rendered, the component's \
events information is placed in the outer <<code>div></code> \
(<code>id="component"). </code></p><p>We want to update the text \
of <code><p id="result"></code> with the value of \
the <code>origin</code> property of the returned JSON object when that element \
itself is clicked, so here's our JavaScript code, supposing we want to trigger the \
<code>answer</code> event:</p><div class="code panel pdl" style="border-width: \
1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: js; gutter: \
true; theme: Default" style="font-size:12px;">require(["t5/core/ajax", "jquery"], \
function (ajax, $) {
// Creating a callback to be invoked with <p id="result"> is clicked.
$('#result').click(function() {
ajax('answer', {
@@ -175,7 +306,8 @@ void onActionFromRegister()
}
});
});
-});</plain-text-body><p>If you're trying to invoke a page class event handler, you \
can change line 5 above to <code>element: null</code>. You do need to explicitly \
set the <code>element</code> property, otherwise the <code>ajax</code> \
function will treat the first parameter, <code>url</code>, as an URL and not as \
an event name.</p></div> +});</pre>
+</div></div><p>If you're trying to invoke a page class event handler, you can change \
line 5 above to <code>element: null</code>. You do need to explicitly set \
the <code>element</code> property, otherwise the <code>ajax</code> function \
will treat the first parameter, <code>url</code>, as an URL and not as an event \
name.</p></div> </div>
<div class="clearer"></div>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic