AJAX EventLink

This page demonstrates how easily AJAX behaviour can be given to an EventLink, without writing any JavaScript.

In the following example, if you click on the first link then the whole page is refreshed, but if you click on the second link - the AJAX-enabled link - then only serverTime2 is refreshed.
Refresh whole page - this EventLink is not AJAX-enabled
Refresh Server Time 2 - this EventLink is AJAX-enabled

Server Time 1: Sat Apr 27 15:29:57 UTC 2024
Server Time 2: Sat Apr 27 15:29:57 UTC 2024
We gave AJAX behaviour to the second link by specifying async="true" on it, putting a Zone component around serverTime2, and in the event handler method we ask the AjaxResponseRenderer service to render that Zone.

Without zone specified on the first EventLink, clicking it results in Get/Redirect/Get.
The event handler returns a "redirect" to the page to render. This involves 2 round trips to the server.

With zone specified on the second EventLink, clicking it results in Post/Partial-Response.
The event handler returns a component or block to update. This involves only 1 round trip to the server.

References: EventLink, Ajax and Zones, Zone, AjaxResponseRenderer, Request, @Inject, @InjectComponent, t5/core/zone, t5/core/ajax.

Some statistics: for this page the AJAX traffic is less than 100 bytes, whereas the non-AJAX traffic is over 10,000 bytes. The AJAX link generates 1 POST whereas the non-AJAX generates 2 GETs (which is normal for EventLink).

Home


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>AJAX EventLink</h3>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    This page demonstrates how easily <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a> behaviour can be given to an EventLink, 
    without writing any JavaScript.<br/><br/>
    
    In the following example, if you click on the first link then the whole page is refreshed, but if you 
    click on the second link - the AJAX-enabled link - then only serverTime2 is refreshed.

    <div class="eg">
        <t:eventlink event="refreshPage">Refresh whole page</t:eventlink> - this EventLink is not AJAX-enabled<br/>
        <t:eventlink event="refreshZone" async="true">Refresh Server Time 2</t:eventlink> - this EventLink is AJAX-enabled<br/><br/>

        Server Time 1:  ${serverTime1}
        <t:zone t:id="time2Zone" id="time2Zone">
            Server Time 2:  ${serverTime2}
        </t:zone>
    </div>

    We gave AJAX behaviour to the second link by specifying <code>async="true"</code> on it, putting a Zone component around serverTime2, 
    and in the event handler method we ask the AjaxResponseRenderer service to render that Zone.<br/><br/>
    
    <strong>Without zone</strong> specified on the first EventLink, clicking it results in <strong>Get/Redirect/Get</strong>.<br/>
    The event handler returns a "redirect" to the <em>page to render</em>.  This involves 2 round trips to the server.<br/><br/>
    
    <strong>With zone</strong> specified on the second EventLink, clicking it results in <strong>Post/Partial-Response</strong>. <br/>
    The event handler returns a <em>component or block to update</em>.  This involves only 1 round trip to the server.<br/><br/> 

    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/EventLink.html">EventLink</a>, 
    <a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>,
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/Request.html">Request</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/ajax.html">t5/core/ajax</a>.<br/><br/> 
    
    Some statistics: for this page the AJAX traffic is less than 100 bytes, whereas the non-AJAX traffic is over 10,000 bytes. 
    The AJAX link generates 1 POST whereas the non-AJAX generates 2 GETs (which is normal for EventLink).<br/><br/>

    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxEventLink.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxEventLink.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.ajax;

import java.util.Date;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

@Import(stylesheet = "css/examples/js.css")
public class AjaxEventLink {

    // Generally useful bits and pieces

    @Inject
    private Request request;

    @InjectComponent
    private Zone time2Zone;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void onRefreshPage() {
        // Nothing to do - as the page renders the template it will call getServerTime1() and getServerTime2().
    }

    void onRefreshZone() {
        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(time2Zone);
        }
    }

    public Date getServerTime1() {
        return new Date();
    }

    public Date getServerTime2() {
        return new Date();
    }
}



.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}