
<!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 Periodic Update</h3>

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

    We can set up a periodic update of part of a page by wrapping it in a Zone, adding a hidden EventLink or ActionLink, <br/>
    and adding a bit of javascript that periodically does what the EventLink or ActionLink would do.

    <div class="eg">
        <t:eventlink t:id="refreshTimeZone" async="true" style="display: none;">Hidden EventLink</t:eventlink>

        <t:zone t:id="timeZone" id="timeZone">
            serverTime:  ${serverTime}
        </t:zone>
    </div>

    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/5.4/apidocs/org/apache/tapestry5/corelib/components/ActionLink.html">ActionLink</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/Request.html">Request</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</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://www.w3schools.com/js/js_timing.asp">JavaScript Timing Events</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</a>.<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/AjaxPeriodicUpdate.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxPeriodicUpdate.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/modules/zone-periodic-updater.js"/>
        <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.ComponentResources;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.corelib.components.EventLink;
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 org.apache.tapestry5.services.javascript.JavaScriptSupport;

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

    // Generally useful bits and pieces

    @InjectComponent
    private EventLink refreshTimeZone;

    @InjectComponent
    private Zone timeZone;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    @Inject
    private ComponentResources componentResources;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @Inject
    private Request request;

    // The code

    public void afterRender() {
        String eventURL = refreshTimeZone.getLink().toAbsoluteURI();

        javaScriptSupport.require("zone-periodic-updater").with(timeZone.getClientId(), eventURL, 3, 4);
    }

    void onRefreshTimeZone() {
        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(timeZone);
        }
    }

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


// For a zone (zoneElementId), periodically issues an AJAX request (eventURL) to update it.

define(["jquery", "t5/core/zone"], function($, zoneManager) {

    return function(zoneElementId, eventURL, frequencySecs, maxUpdates) {

        var frequencyMillis = frequencySecs * 1000;
        var updatesCount = 0;

        var interval = setInterval(updateZone, frequencyMillis);

        function updateZone() {
            if (updatesCount++ < maxUpdates) {
                // Update the zone.
                zoneManager.deferredZoneUpdate(zoneElementId, eventURL);
            }
            else {
                // Stop updating.
                clearInterval(interval);
            }
        }
    }

});


.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;
}