The short form is: trigger an events.zone.update event on the zone's client-side element to update it immediately, using available content (a string, or DOM elements).
Or, trigger events.zone.refresh event when you know a URL and additional parameters; Tapestry will run the Ajax request and update the zone when the content is available. I think Geoff's example is actually a bit complicated. Take a peek at the t5/core/zone module to see how simple it can be: http://people.apache.org/~hlship/t5api/coffeescript/zone.html On Thu, Dec 12, 2013 at 1:47 AM, Geoff Callender < geoff.callender.jumpst...@gmail.com> wrote: > This should give you the clues you need: it's the ZoneUpdater mixin from > the upcoming preview of JumpStart 7. It uses a dependency on "t5/core/zone". > > Example usage: > > <t:textfield t:id="firstName" t:mixins="zoneUpdater" clientEvent="keyup" > event="firstNameChanged" zone="nameZone"/> > > > ZoneUpdater.java: > > /** > * A simple mixin for attaching javascript that updates a zone on any > client-side event. > * Based on > http://tinybits.blogspot.com/2010/03/new-and-better-zoneupdater.html > */ > package jumpstart.web.mixins; > > import org.apache.tapestry5.BindingConstants; > import org.apache.tapestry5.ClientElement; > import org.apache.tapestry5.ComponentResources; > import org.apache.tapestry5.annotations.Environmental; > import org.apache.tapestry5.annotations.InjectContainer; > import org.apache.tapestry5.annotations.Parameter; > import org.apache.tapestry5.ioc.annotations.Inject; > import org.apache.tapestry5.services.javascript.JavaScriptSupport; > > public class ZoneUpdater { > > // Parameters > > /** > * The event to listen for on the client. If not specified, zone > update can only be triggered manually through > * calling updateZone on the JS object. > */ > @Parameter(name = "clientEvent", defaultPrefix = > BindingConstants.LITERAL) > private String clientEvent; > > /** > * The event to listen for in your component class > */ > @Parameter(name = "event", defaultPrefix = > BindingConstants.LITERAL, required = true) > private String event; > > @Parameter(name = "prefix", defaultPrefix = > BindingConstants.LITERAL, value = "default") > private String prefix; > > @Parameter(name = "context") > private Object[] context; > > /** > * The zone to be updated by us. > */ > @Parameter(name = "zone", defaultPrefix = > BindingConstants.LITERAL, required = true) > private String zone; > > /** > * Set secure to true if https is being used, else set to false. > */ > @Parameter(name = "secure", defaultPrefix = > BindingConstants.LITERAL, value = "false") > private boolean secure; > > // Useful bits and pieces > > @Inject > private ComponentResources componentResources; > > @Environmental > private JavaScriptSupport javaScriptSupport; > > /** > * The element we attach ourselves to > */ > @InjectContainer > private ClientElement clientElement; > > // The code > > void afterRender() { > String listenerURI = > componentResources.createEventLink(event, context).toAbsoluteURI(secure); > > > javaScriptSupport.require("mixins/zone-updater").with(clientElement.getClientId(), > clientEvent, listenerURI, > zone); > } > } > > > zone-updater.js: > > define(["jquery", "t5/core/zone"], function($, zoneManager) { > > return function(elementId, clientEvent, listenerURI, > zoneElementId) { > var element = $("#" + elementId); > > if (clientEvent) { > element.on(clientEvent, updateZone); > } > > function updateZone() { > var listenerURIWithValue = listenerURI; > > if (element.val()) { > listenerURIWithValue = > appendQueryStringParameter(listenerURIWithValue, 'param', element.val()); > } > > zoneManager.deferredZoneUpdate(zoneElementId, > listenerURIWithValue); > } > } > > function appendQueryStringParameter(url, name, value) { > if (url.indexOf('?') < 0) { > url += '?' > } > else { > url += '&'; > } > value = escape(value); > url += name + '=' + value; > return url; > } > > }); > > Cheers, > > Geoff > > > On 12/12/2013, at 6:50 AM, Matthias wrote: > > > Hi, > > > > I'd like to update a zone with a simple ajax call and I'm not sure how > its done: > > > > Javascript > > require([ "jquery", "myController"], function($, myController) { > > > > $(myController).on("myEvent", function(e) { > > // here i'd like to fire an ajax call that should update my zone > > }); > > }); > > > > tml > > <t:zone id="myZone" t:id="myZone"> > > <table class="table"> > > <tbody> > > <tr t:type="loop" source="hits" value="hit"> > > <td>${hit.id}</td> > > </tr> > > </tbody> > > </table> > > </t:zone> > > > > Java > > public class Search { > > > > @Property > > // some other annotations needed? > > List<Hit> hits; > > > > @Property > > // some other annotations needed? > > Hit hit; // i need this right? > > > > @InjectComponent > > private Zone myZone; > > > > private void setupRender() { > > hits = new ArrayList<>(); > > } > > > > Object onAjaxEvent() { > > hits = // do some solr stuff to get hits > > return myZone; > > } > > } > > > > In 5.3 there was a Tapestry javascript object with a > findZoneManagerForZone() method. How is this done in 5.4? > > > > --------------------------------------------------------------------- > > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org > > For additional commands, e-mail: users-h...@tapestry.apache.org > > > > -- Howard M. Lewis Ship Creator of Apache Tapestry The source for Tapestry training, mentoring and support. Contact me to learn how I can get you up and productive in Tapestry fast! (971) 678-5210 http://howardlewisship.com
